使用Canvas实现的探照灯/手电筒效果

当灯光扫过隐藏文本时，会显示该文本。

canvas，lanter

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 2744
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

window.onload = function() {
    var canvas = document.getElementById("canvas");
    ctx = canvas.getContext("2d");
    var w = canvas.width = $(window).width();
    var h = canvas.height = 800;
    var m_w = 10,
        m2_w = 100;
    var m_x = 0,
        m_y = 0;
    var num = 100;
    render();

function render() {
        clear();
        for (i = 0; i < num; i++) {
            dif = (i * m_x) / num;
            diy = (i * m_y) / num;
            a = 255;
            ctx.fillStyle = "rgba(" + a + "," + a + "," + a + ",.01)";
            ctx.beginPath();
            ctx.shadowColor = "rgb(" + a + "," + a + "," + a + ")";
            ctx.shadowBlur = (i / 2);
            ctx.shadowOffsetX = 1;
            ctx.shadowOffsetY = 1;
            ctx.arc(w / 2 + dif, h / 2 + diy, i, 0, Math.PI * 2);
            ctx.fill();
        }
        requestAnimationFrame(render);
    }

function clear() {
        ctx.clearRect(0, 0, w, h);
    }
    document.body.addEventListener("mousemove", function(e) {
        m_x = e.clientX - (w / 2);
        m_y = e.clientY - (h / 2);
    });
}

编译

CSS

HTML

当灯光扫过隐藏文本时，会显示该文本。

canvas，lanter

编辑器支持Emmet

快捷键

当灯光扫过隐藏文本时，会显示该文本。

canvas，lanter

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：