canvas简单的鼠标跟随

Html

Css

body {
	cursor:url("js/auto.cur"),auto;
}
#canvas {
	background:white;
	position:absolute;
	border:blue 1px solid;
	cursor:pointer;
}

(function() {
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    canvas = $('#canvas');
    var canvasW = canvas.offset().left;
    var canvasH = canvas.offset().top;
    var mouseKey = false;
    var canvasAll = [];
    var canvasNowX = -10;
    var canvasNowY = -10;

function canvasBegin(mouseX, mouseY) {
        var fillStyleR = Math.floor(Math.random() * 255);
        var fillStyleG = Math.floor(Math.random() * 255);
        var fillStyleB = Math.floor(Math.random() * 255);
        var fillStyle = 'rgb(' + fillStyleR + ',' + fillStyleG + ',' + fillStyleB + ')';
        var grd = ctx.createRadialGradient(mouseX, mouseY, 0, mouseX, mouseY, 25);
        canvasAll.push({
            x: mouseX,
            y: mouseY,
            fillStyle: fillStyle
        });
        grd.addColorStop(0, fillStyle);
        grd.addColorStop(1, "white");
        ctx.fillStyle = grd;
        ctx.beginPath();
        ctx.arc(mouseX, mouseY, 20, 0, Math.PI * 2, true);
        ctx.fill();
    }

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

立即下载

canvas简单的鼠标跟随



代码描述：canvas实现简单的鼠标跟随，按住鼠标左键移动绘画轨迹，2秒后轨迹消失

canvas实现简单的鼠标跟随，按住鼠标左键移动绘画轨迹，2秒后轨迹消失

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

passerma

相关代码

canvas简单的鼠标跟随

最新