Canvas 鼠标移动轨迹跟踪的可视化动画

Mouse visualiser 在预览窗口移动鼠标，会自动绘制出移动轨迹。

canvas, mouse

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

第三方库
作品简介 6828
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

var canvas = document.createElement("canvas"),
    c = canvas.getContext("2d");
var w = canvas.width = window.innerWidth,
    h = canvas.height = window.innerHeight;

c.fillStyle = "rgb(0,0,0)";
c.fillRect(0, 0, w, h);

document.body.appendChild(canvas);

x = w / 2;
y = h / 2;
size = Math.round(Math.random() * 30 + 20);

function draw() {
    size = Math.round(Math.random() * 100 + 10);

c.beginPath();
    c.moveTo(last_mouse.x, last_mouse.y);
    c.lineTo(mouse.x, mouse.y)
    c.strokeStyle = "white";
    c.lineWidth = "0.5";
    c.stroke();

window.addEventListener('mousedown', function(e) {
        c.beginPath();
        c.arc(mouse.x, mouse.y, size, 0, 2 * Math.PI);
        c.strokeStyle = "white";
        c.lineWidth = "0.1";
        c.stroke();
        c.beginPath();
        c.arc(mouse.x, mouse.y, size / 3, 0, 2 * Math.PI);
        c.fillStyle = "white";
        c.lineWidth = "0.1";
        c.fill();
    }, false);

}

var mouse = {
    x: 0,
    y: 0
};
var last_mouse = {
    x: 0,
    y: 0
};

canvas.addEventListener('mousemove', function(e) {
    last_mouse.x = mouse.x;
    last_mouse.y = mouse.y;

mouse.x = e.pageX - this.offsetLeft;
    mouse.y = e.pageY - this.offsetTop;
}, false);

window.requestAnimFrame = (function() {
    return window.requestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        window.oRequestAnimationFrame ||
        window.msRequestAnimationFrame ||
        function(callback) {
            window.setTimeout(callback, 1000 / 60);
        };
})();

function loop() {
    c.fillStyle = "rgba(0,0,0,0.05)";
    c.fillRect(0, 0, w, h);
    window.requestAnimFrame(loop);
    draw();
}

loop();

编译

CSS

HTML

Mouse visualiser 在预览窗口移动鼠标，会自动绘制出移动轨迹。

canvas, mouse

编辑器支持Emmet

快捷键

Mouse visualiser 在预览窗口移动鼠标，会自动绘制出移动轨迹。

canvas, mouse

HTML5 Canvas很酷的一个鼠标精灵交互动画特效

Canvas+CSS3 表面有波纹动画和透明标签的立方体

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：