<!DOCTYPE html>
多个圆形自上向下运动
<br> var canvas = document.getElementById("canvas");<br> var context = canvas.getContext("2d");</p> <pre><code>function Circle(){ this.x = Math.random()*canvas.width; this.y = -10; this.r = 10; // 绘制圆形方法 this.paint = function(){ context.beginPath(); context.arc(this.x,this.y,this.r,0,Math.PI*2); context.fill(); } // 控制圆形移动方法 this.step = function(){ this.y++; } } //var circle = new Circle(); var circles = []; // 定义函数 - 创建圆形对象 function createCircles(){ var circle = new Circle(); circles[circles.length] = circle; } // 定义函数 - 绘制所有圆形 function paintCircls(){ for(var i=0;i<circles.length;i++){ circles[i].paint(); } } // 定义函数 - 控制所有圆形运动 function stepCircles(){ for(var i=0;i<circles.length;i++){ circles[i].step(); } } var myimg = new Image(); myimg.src = "bg.jpg"; var time = 0; setInterval(function(){ context.drawImage(myimg,0,0); time++; if(time%20==0){ createCircles(); } paintCircls(); stepCircles(); },10); </code></pre> <p>
