canvas跟随鼠标

Html

Css

html,body {
	width:100%;
	height:100%;
	margin:0;
	padding:0;
	text-align:center;
}
#canvas {
	display:block;
}
#canvas:hover {
	cursor:crosshair;
}

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

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var cw = canvas.width = window.innerWidth;
var ch = canvas.height = window.innerHeight;

Circle.pool.push(this);
}

//每次新产生圆形时，放入Circle.pool数组中
Circle.pool = [];

//判断圆形是否“死亡”，即是否要进行清除圆形
Circle.judgeDeath = function(o) {
    return (Date.now() - o.borntime) >= o.aliveTime;
}

//动画每帧更新圆形有关属性
Circle.prototype.update = function() {
    if (Circle.judgeDeath(this)) {
        if (this.alpha <= 0) {
            var index = Circle.pool.indexOf(this);
            Circle.pool.splice(index, 1);
            //console.log(Circle.pool.length);
            return;
        } else {
            this.alpha -= 0.04;
            return;
        }
    }
    var pp = this.sp + (Date.now() - this.borntime) % this.aliveTime / this.aliveTime;
    if (pp >= 1)
        pp -= this.sp;
    //console.log(pp)
    var e;
    var m = 4;
    var n = 1 / 2;
    var t = Math.ceil(pp * m);
    if (t <= 1) {
        e = -m * m * pp * pp + 1;
    } else {
        e = -4 * m * m * Math.pow(n, t - 1) * Math.pow(pp - (2 * t - 1) / (2 * m), 2) + Math.pow(n, t - 1);
    }
    this.r = this.sr - this.sr * e;
}

//在屏幕上绘制圆形
Circle.prototype.render = function(ctx) {
    ctx.beginPath();
    ctx.fillStyle = this.fillcolor;
    ctx.arc(this.cx, this.cy, this.r, 0, Math.PI * 2, false);
    ctx.closePath();
    ctx.fill();
}

for (var i = 0; i < 30; i++) {
    new Circle(Math.random() * cw, Math.random() * ch, Math.random() * 20, Math.random() * 5000);
}

//开始进行动画
function draw() {
    ctx.clearRect(0, 0, cw, ch);

Circle.pool.forEach(function(e) {
        e.update();
        e.render(ctx);
    });
    requestAnimationFrame(draw);
}
draw();
canvas.addEventListener('mousemove', function(e) {
    new Circle(e.pageX - canvas.offsetLeft, e.pageY - canvas.offsetTop, Math.random() * 20, Math.random() * 5000);
});

window.addEventListener('resize', function() {
    cw = canvas.width = window.innerWidth;
    ch = canvas.height = window.innerHeight;
});

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

立即下载

canvas跟随鼠标



代码描述：使用HTML5 canvas画布，制作跟随鼠标动态生成的动画特效，使用原生Javript

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

bibibobo

相关代码

canvas跟随鼠标

最新