<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <div id="box" style="width: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=10; //创建构造函数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 >= 20) { radius = 10; }; }; // 绘制圆形的方法 Circle.prototype.paint=function(){ context.beginPath(); context.arc(this.xx,this.yy,10,0,Math.PI*2); context.fillStyle="rgba(250,250,50,1)";//填充颜色,默认是黑色 context.fill();//画实心圆 context.closePath(); context.lineWidth = 2; //线条宽度 context.strokeStyle = 'rgba(250,250,50,1)'; //颜色 context.stroke(); this.paintkong(); this.paintkong(0); this.paintkong(10); this.paintkong(20); }; Circle.prototype.paintkong=function(num){ context.beginPath(); context.arc(this.xx,this.yy,this.radius+num,0,Math.PI*2); context.closePath(); context.lineWidth = 1; //线条宽度 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(); }; createCircles() // 创建临时canvas var backCanvas = document.createElement('canvas'), backCtx = backCanvas.getContext('2d'); backCanvas.width = width; backCanvas.height = height; //设置主canvas的绘制透明度 context.globalAlpha = 0.7; //显示即将绘制的图像，忽略临时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()", 100); </script> </body> </html>
