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在粒子制作方面的基本語法和功能。