还记得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入门项目之当年的红包图片的全部内容,欢迎大家指点讨论

微信交流(备注:前端)