效果展示：

源码展示：

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>canvas实现聚光灯效果（js）</title>
</head>
<body>
<canvas id="canvas" width="533" height="300" ></canvas>

<script>
    class Lamp {
        /**
         *
         * @param canvas_id canvas元素id
         * @param img       图片路径
         * @param cover_color 遮盖颜色，与cxt.fillStyle一致
         * @param radius    显示圆环大小
         */
        constructor(canvas_id, img, cover_color, radius) {
            //基本属性
            this.img = document.createElement("img");
            this.img.src = img;
            this.ctx = document.getElementById(canvas_id).getContext("2d");
            this.canvas = this.ctx.canvas;

            this.hideC1 = document.createElement("canvas").getContext("2d");

            this.overColor = cover_color;
            this.radius = radius;
            this.x = 0;
            this.y = 0;

            this.img.onload = () => this.init();
        }

        init() {
            //初始化画布
            this.ctx.fillStyle = this.overColor;
            this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
            this.overImgData = this.ctx.getImageData(0, 0, this.canvas.width, this.canvas.height);

            //初始化C1 C2并绑定监听事件
            this.initHideC1();
            this.canvas.addEventListener('mousemove', (event) => this.mouseMove(event));
            this.canvas.addEventListener('mouseout', (event) => this.mouseOut(event));
        }
        //初始化c1
        initHideC1() {
            let t = this.hideC1.canvas;
            t.width = this.canvas.width;
            t.height = this.canvas.height;
            this.hideC1.drawImage(this.img, 0, 0, this.img.width, this.img.height);
            return this;
        }

        //鼠标在画布上移动
        mouseMove(e) {
            let t = this.canvas.getBoundingClientRect();
            this.x = e.clientX - t.left - this.radius;
            this.y = e.clientY - t.top - this.radius;
            this.light();
            return this;
        }

        //鼠标移除
        mouseOut() {
            this.ctx.putImageData(this.overImgData, 0, 0);
            return this;
        }


        //添加聚光灯效果
        light() {
            this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
            this.ctx.putImageData(this.overImgData, 0, 0);

            this.ctx.beginPath();
            this.ctx.arc(this.x + this.radius, this.y + this.radius, this.radius, 0, Math.PI * 2);
            this.ctx.fillStyle = this.ctx.createPattern(this.hideC1.canvas, 'no-repeat');
            this.ctx.fill();
        }
    }
    new Lamp('canvas', "a.jpg", 'rgba(45,0,0,0.7)', 100);
</script>
<hr>
<pre style="color:red">
 感：  最近贡献一下我在教学中的小案例可以能给你一些帮助 ,希望继续关注我的博客

                                                                               --王
</pre>


</body>
</html>
canvas实现聚光灯效果（js）

效果展示：

源码展示：

猜你喜欢
