还记得16年有段时间微信上线的红包照片功能吗？今天我们就通过canvas来尝试一下具体的实现。
1、效果：
图片来源：图虫网
2、思路：
1、通过css3的filter中的blur实现人物图片的高斯模糊
2、通过定位将canvas等比例的定位到人物图片上
3、通过drawImage绘制高清的任务图像到canvas中
4、通过arc创建圆形路径，然后通过clip创建剪切板
5、通过按钮的点击实现实现圆心的随机位置
6、通过setInterval创建动画效果
3、提示：
1、isShowFinish：动画需要时间，动画没有完成前，拦截所有的点击事件
2、isShow：拦截随机按钮的多次点击
4、源码：
提示：源码自己格式化
<!DOCTYPE html><html lang=”en”>
<head> <meta charset=”UTF-8″> <meta http-equiv=”X-UA-Compatible” content=”IE=edge”> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <title>Document</title> <style> .box { position: relative; width: 640px; height: 427px; margin: 100px auto; }
img { position: absolute; top: 0; left: 0; filter: blur(20px); z-index: 9; }
canvas { position: absolute; top: 0; left: 0; z-index: 99; }
.set { text-align: center; } </style></head>
<body> <style> .box { position: relative; width: 640px; height: 427px; margin: 100px auto; }
img { position: absolute; top: 0; left: 0; filter: blur(20px); z-index: 9; }
canvas { position: absolute; top: 0; left: 0; z-index: 99; }
.set { text-align: center; } </style> <div class=”box”> <img id=”img” src=”https://www.liuyanla.com/wp-content/uploads/2021/03/image-3.png” alt=””> <canvas id=”myCanvas”></canvas> </div> <div class=”set”> <button onclick=”random()”>随机</button> <button onclick=”show()”>显示</button> </div> <script> let canvas = document.getElementById(‘myCanvas’); let cvsCtx = canvas.getContext(‘2d’); let width = 600; let height = 427; let isShow = false; let isShowFinish = true; let clippingRegion = { x: 1, y: 1, r: 50, }; canvas.width = width; canvas.height = height; let img = new Image(); random();
function drawImage() { img.src = “https://www.liuyanla.com/wp-content/uploads/2021/03/image-3.png”; img.onload = (e) => { cvsCtx.clearRect(0, 0, width, height); cvsCtx.save(); getClippingRegion(); cvsCtx.drawImage(img, 0, 0); cvsCtx.restore() } };
function getClippingRegion() { cvsCtx.beginPath(); cvsCtx.arc(clippingRegion.x, clippingRegion.y, clippingRegion.r, 0, Math.PI * 2, false); cvsCtx.clip() };
function show() { if (isShow) return false; isShow = true; isShowFinish = false; let timer = setInterval(() => { clippingRegion.r += 5; if (clippingRegion.r > parseInt(Math.sqrt(width * width + height * height))) { clearInterval(timer); isShowFinish = true } else { drawImage() } }, 10) };
function random() { if (!isShowFinish) return false; isShow = false; isShowFinish = false; clippingRegion.r = 50; let x = clippingRegion.x; let y = clippingRegion.y; let rx = Math.random() * (width – 100) + 50; let ry = Math.random() * (height – 100) + 50; let timer = setInterval(() => { clippingRegion.x += (rx – x) / 100; clippingRegion.y += (ry – y) / 100; console.log(rx – x, ry – y); if (parseInt(clippingRegion.x) == parseInt(rx)) { clearInterval(timer); isShowFinish = true } else { drawImage() } }, 1) }; </script></body>
</html>
以上就是canvas入门项目之当年的红包图片的全部内容，欢迎大家指点讨论
近期评论