色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

html5粒子制作代碼

林玟書2年前12瀏覽0評論

HTML5是一種機(jī)制,它可以讓網(wǎng)頁的結(jié)構(gòu)更加清晰,并且可以讓網(wǎng)頁變得更加動態(tài)。其中,HTML5粒子制作是非常有趣和重要的一個方面。

var canvas = document.getElementById("particleCanvas");
var context = canvas.getContext("2d");
var width = window.innerWidth;
var height = window.innerHeight;
canvas.width = width;
canvas.height = height;
var particles = [];
function Particle(x, y, size) {
this.x = x;
this.y = y;
this.size = size;
this.speed = {
x: Math.random() * 5 - 2.5,
y: Math.random() * 5 - 2.5
}
this.life = 50 + Math.random() * 10;
this.remainingLife = this.life;
this.color = "rgba(255,255,255,1)";
}
Particle.prototype.draw = function() {
context.fillStyle = this.color;
context.fillRect(this.x, this.y, this.size, this.size);
}
function loop() {
context.clearRect(0,0,width,height);
particles.push(new Particle(width/2,height/2,6));
for(var i = 0; i< particles.length; i++) {
var p = particles[i];
p.remainingLife--;
p.size *= 0.98;
p.x += p.speed.x;
p.y += p.speed.y;
if(p.remainingLife< 0 || p.size< 1) {
particles.splice(i,1);
continue;
}
p.draw();
}
setTimeout(loop,30);
}
loop();

以上是一個基本的HTML5粒子制作代碼,該代碼使用了Canvas元素來創(chuàng)建一個具有隨機(jī)速度、大小和顏色的粒子。它使用了定時器來不斷刷新屏幕,使粒子不斷移動,這也是HTML5粒子制作的一個重要特點。通過這個例子,可以了解到HTML5在粒子制作方面的基本語法和功能。