canvas的使用

canvas实现烟花效果

1.思路
（1）鼠标点击画布，在画布初出现烟花绽放效果；
（2）在鼠标点击处随机生成若干粒子（圆）；
（3）对每个粒子设置，使其有自己的运动轨迹；
（4）给粒子添加事件，使其运动起来。
2.功能实现
在html中设置canvas画布大小，边框颜色及大小，

<canvas id="myCanvas" width="400px;" height="400px" >当前浏览器不支持canvas</canvas>

#myCanvas{
        border:1px solid #333;
    }

获取鼠标点击时，屏幕上的x，y轴坐标
在x，y点周围生成若干粒子

	var e = event || window.event;
    var x = e.offsetX;
    var y = e.offsetY;
        for(var i = 0;i <= c;i++){
   
        var  n = 360 / c * i;
        //圆心（x，y） 半径 r 半径划过角度 a
        // 求对应圆弧上点坐标
        // x1 = x + r * cos(a * Π / 180）
        // y1 = y + r * sin(a * Π / 180)
        var radians = n * Math.PI / 180;
        var dx = x +  Math.cos(radians) * radius;
        var dy = y +  Math.sin(radians) * radius;

        context.beginPath();
        context.arc(dx,dy,r1,0,2*Math.PI,false);
        context.closePath();
        context.fillStyle = '#ff0000';
        context.fill();
        }

效果图如下：

实现粒子往外运动，可以用setInterval()进行每30毫秒刷新一次canvas，显示出粒子向外扩散的效果：

 setInterval(function(){
   
            radius ++ ;
            createBalls(x,y);
        },30); 

此时，需要每次执行setInterval()函数画粒子之前，先清除canvas画布，