<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <div id="box" style="600px;height:600px;margin:0 auto;border:2px solid #000;background:#000;"></div> <script type="text/javascript"> var canvasList = document.getElementById('box'); var canvas = document.createElement('canvas'); canvasList.appendChild(canvas); canvas.width = 600; //☜ canvas.height = 600; var context=canvas.getContext("2d"); var width=600,height=600; var arr = []; for(var i=0;i<10;i++){ arr.push({x:parseInt(Math.random()*canvas.width),y:parseInt(Math.random()*canvas.height)}); }; var radius=0; //创建构造函数Circle function Circle(x,y,radius){ this.xx=x;//在画布内随机生成x值 this.yy=y; this.radius=radius; }; Circle.prototype.radiu=function(){ radius += 0.5; //每一帧半径增加0.5 if (this.radius > 30) { radius = 0; }; }; // 绘制圆形的方法 Circle.prototype.paint=function(){ context.beginPath(); context.arc(this.xx,this.yy,this.radius,0,Math.PI*2); context.closePath(); context.lineWidth = 2; //线条宽度 context.strokeStyle = 'rgba(250,250,50,1)'; //颜色 context.stroke(); }; // 创建 var newfun = null; function createCircles(){ for(var j=0;j<arr.length;j++){ newfun= new Circle(arr[j].x,arr[j].y,radius);//调用构造函数 newfun.paint(); }; newfun.radiu(); }; // 创建临时canvas var backCanvas = document.createElement('canvas'), backCtx = backCanvas.getContext('2d'); backCanvas.width = width; backCanvas.height = height; //设置主canvas的绘制透明度 context.globalAlpha = 0.95; //显示即将绘制的图像，忽略临时canvas中已存在的图像 backCtx.globalCompositeOperation = 'copy'; var render = function() { //先将主canvas的图像缓存到临时canvas中 backCtx.drawImage(canvas, 0, 0, width, height); //清除主canvas上的图像 context.clearRect(0, 0, width, height); //在主canvas上画新圆 createCircles(); //等新圆画完后，再把临时canvas的图像绘制回主canvas中 context.drawImage(backCanvas, 0, 0, width, height); }; setInterval("render()", 14); </script> </body> </html>
