canvas旋转球

Html

Css

* {
	margin:0;
	padding:0;
}
body {
	width:100%;
	height:100vh;
}
#canvas {
	background-color:#000000;
}

/** @type {HTMLCanvasElement} */
let canvas = document.querySelector('#canvas'),
    cxt = canvas.getContext('2d'),
    w = canvas.width = window.innerWidth,
    h = canvas.height = window.innerHeight,
    particles, num = 255;

function ranColor() {
    return '#' + Math.floor(Math.random() * 16777215).toString(16);
}

class Particle {
    constructor(x, y, r, color, distance, speed) {
        this.x = x;
        this.y = y;
        this.r = r;
        this.color = color;
        this.rad = 1;
        this.distance = distance;
        this.speed = speed;
    }

drawParticle() {
        cxt.beginPath();
        cxt.arc(this.x, this.y, this.r, 0, 2 * Math.PI);
        cxt.fillStyle = this.color;
        cxt.fill();
    }

updateParticle() {
        this.x = w / 2 + Math.sin(this.rad) * this.distance;
        this.y = h / 2 + Math.cos(this.rad) * this.distance;
        this.rad += this.speed;
        this.drawParticle();
    }
}

function init() {
    particles = [];
    for (let i = 1; i <= num; i++) {
        particles.push(new Particle(w / 2, h / 2, 5, ranColor(), i + 50, i * 0.0003));
    }

}

function anim() {
    requestAnimationFrame(anim);
    cxt.clearRect(0, 0, w, h);
    for (p of particles) {
        p.updateParticle();
    }
}

init();
anim();

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

立即下载

canvas旋转球



代码描述：canvas旋转粒子动画

更新时间：2020-06-29 08:46:59
canvas小球绕中心旋转

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

坏人

相关代码

canvas旋转球

最新