粒子随机运动

Html

Css

 * {
	margin:0;
}
canvas {
	background:#cccccc;
	margin:0 auto;
	display:block;
}

window.onload = function() {
    let canvas = document.querySelector("#lizi");
    let cobj = canvas.getContext("2d");
    let x = 500;
    let y = 10;
    canvas.onmousemove = function(e) {
        x = e.offsetX
        y = e.offsetY;
    }

class lizi {
        constructor(canvas, cobj) {
            this.canvas = canvas;
            this.cobj = cobj;
            this.r = 10 * Math.random();
            this.x = x;
            this.y = y;
            this.speedX = 6 * Math.random() - 2;
            this.speedY = -5;
            this.g = 0.3;
            this.color = `rgb(${parseInt(255*Math.random())},${parseInt(255*Math.random())},${parseInt(255*Math.random())})`
        }
        draw() {
            this.cobj.save();
            this.cobj.beginPath();
            this.cobj.translate(this.x, this.y);
            this.cobj.arc(0, 0, this.r, 0, Math.PI * 2); //建路径 // Math.PI*2 == 2π    // 0,Math.PI*2   从0到2π
            this.cobj.fillStyle = this.color;
            this.cobj.fill();
            this.cobj.restore();
        }
        updata() {
            this.x += this.speedX;
            this.speedY += this.g;
            this.y += this.speedY;
        }
    }

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

立即下载

粒子随机运动



代码描述：canvas鼠标跟随粒子随机运动

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

の苦笑流年记忆

相关代码

粒子随机运动

最新