html5动态创建canvas,[canvas]通过动态生成像素点做绚丽效果

智能粒子

body{background-color:black;}#Canvas{margin:50px auto;display:block;border:1px red solid;}

您的浏览器不支持canvas

/**用面向对象编程方法实现的粒子

*by @谢帅shawn*/

//初始化画布

varcanvas=document.getElementById('Canvas');varctx=canvas.getContext('2d');/**创建一个圆环类Circle,智能圆环的模型*/

varCircle=function(x,y,speeds){this.x=x;this.y=y;this.speed=speeds;

}

Circle.prototype={//draw方法，画出像素

draw:function(){varn=this.y*imgdata.width+this.x;vari=n*4;

data[i]+=207;

data[i+1]+=14;

data[i+2]+=139;

data[i+3]+=150;

},//move方法，圆环坐标自加速度，并执行draw方法

move:function(){this.x+=this.speed.speedX;this.y+=this.speed.speedY;this.draw();

}

}/**创建一个Frame帧类,管理所有circles实例，实现画布的渲染*/

varFrame=function(){