這個也是別人的代碼，就不多介紹了
寫了些注釋
粒子植入效果。?
body {overflow:hidden;margin:0;padding:0;background-color:#222222
}
</style>
</head>
<body>
<canvas id="canvasParticle">Canvas is not supported in your brower.</canvas><script>
window.onload = function() {var oCanvas = document.getElementById('canvasParticle');var cxt = null;//用來存放粒子的素組var particles = {};var particleIndex = 0;if (oCanvas.getContext) {cxt = oCanvas.getContext('2d');}oCanvas.width = window.innerWidth;oCanvas.height = window.innerHeight;function Particle() {particleIndex++;particles[particleIndex] = this;//粒子放射的中心點this.x = oCanvas.width / 2;this.y = oCanvas.height / 2;//初始化粒子沿X軸和Y軸的速度this.vx = Math.random() * 6 - 3;this.vy = Math.random() * 4 - 2;this.growth = (Math.abs(this.vx) + Math.abs(this.vy)) * 0.01; // 根據x/y軸的位置決定大小this.id = particleIndex;this.size = 0;this.color = getRandomColor();};Particle.prototype.draw = function() {this.x += this.vx;this.y += this.vy;//根據移動的距離逐漸變大this.size += this.growth;if (this.x < 0 || this.x > oCanvas.width || this.y < 0 || this.y > oCanvas.height) {//出界則移除delete particles[this.id];}cxt.fillStyle = this.color;cxt.beginPath();cxt.arc(this.x, this.y, this.size, 0, 2 * Math.PI);cxt.fill();};function animate() {requestAnimationFrame(animate);cxt.fillStyle = '#222222';cxt.fillRect(0, 0, oCanvas.width, oCanvas.height);//每次網數組添加一個數據new Particle();//遍歷數組，依次畫出for (var i in particles) {particles[i].draw();}};requestAnimationFrame(animate);
};//隨機顏色方法
function getRandomColor() {return '#' + (Math.random() * 0xffffff << 0).toString(16);};</script>
</body>
?
