使用canvas创建聚光灯效果(原创)

Html

Css

#canvas {
	width:400px;
	height:432px;
}

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', "http://www.jq22.com/demo/jquerylbt201801062335/images/a1.png", 'rgba(45,0,0,0.7)', 150);

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

使用canvas创建聚光灯效果(原创)

代码描述：使用html5 canvas创建聚光灯效果

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

296769589@qq.com

相关代码

使用canvas创建聚光灯效果(原创)

最新