HTML5粒子特效透明度代碼 在前端開發中，我們常常需要使用一些特效來提高用戶體驗。其中，粒子特效非常受歡迎。在HTML5中，使用Canvas和JavaScript可以輕松實現粒子特效。 下面，我們來看一個實現粒子透明度變化效果的代碼：

var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var particlesArray = []; 
var numberOfParticles = 100; 
function Particle(){
this.x = Math.random() * canvas.width;
this.y = Math.random() * canvas.height;
this.radius = Math.random() * 3 + 1;
this.color = 'rgba(255,255,255, 1)'; 
this.speedX = Math.random() * 3 - 1.5; 
this.speedY = Math.random() * 3 - 1.5; 
this.opacity = Math.random() * 0.5 + 0.5;
this.draw = function(){
ctx.beginPath();
ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
ctx.fillStyle = this.color;
ctx.globalAlpha = this.opacity;
ctx.fill();
}
this.update = function(){
this.x += this.speedX;
this.y += this.speedY;
if(this.x + this.radius >canvas.width || this.x - this.radius< 0){
this.speedX = -this.speedX;
}
if(this.y + this.radius >canvas.height || this.y - this.radius< 0){
this.speedY = -this.speedY;
}
this.draw();
}
}
function init(){
for(var i = 0; i< numberOfParticles; i++){
particlesArray.push(new Particle());
}
}
function animate(){
ctx.clearRect(0, 0, canvas.width, canvas.height);
for(var i = 0; i< particlesArray.length; i++){
particlesArray[i].update();
}
requestAnimationFrame(animate);
}
init();
animate();

該代碼中，使用了Particle函數來創建單個粒子，其包括坐標、大小、顏色、速度和透明度等屬性。在draw方法中，使用ctx.globalAlpha設置透明度，使粒子的透明度隨機變化。在update方法中，通過計算粒子的速度和坐標實現了粒子的移動效果。 最后，在init方法中，我們創建多個粒子，并在animate方法中實現了粒子的不斷更新和繪制，從而實現了粒子透明度變化的特效效果。 總之，HTML5提供了豐富的繪圖API和特效集合，使得前端開發者可以輕松生成各種令人驚嘆的效果。