canvas动画圆形扩散(1)

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>

 

 

canvas动画圆形扩散(1)_第1张图片

转载于:https://www.cnblogs.com/wsir/p/9055827.html

你可能感兴趣的:(canvas动画圆形扩散(1))