canvas特效用例之粒子射线

实现效果

构建粒子类

function Particle(option){
	option = option || {
    color:'#000',
    radius:10,
    x:0,
    y:0,
    speedX:1,
    speedY:1
  };
	
	this.color = option.color;
	this.radius = option.radius;
	this.x = option.x;
	this.y = option.y;
	this.speedX = option.speedX;
	this.speedY = option.speedY;
}

Particle.prototype.draw = function(ctx){
	ctx.fillStyle = this.color;
	ctx.beginPath();
	ctx.arc(this.x,this.y, this.radius, 0, Math.PI * 2);
	ctx.closePath();
	ctx.fill();
}

总结
canvas的宽度和高度需在js中设置其像素值，不要在css中设置，否则会造成一些意料之外的效果，比如显示的元素比预期的大、变模糊等。 造成此效果的原因：canvas实际上有两套尺寸，一个是元素本身的尺寸，一个是元素绘图表面的尺寸，当在js中通过设置width和height时是同时修改了两尺寸，而在css中设置width和height就仅仅修改了canvas本身的尺寸；而在默认情况下,canvas的绘图表面尺寸是300*150,然而，当浏览器发现canvas尺寸与绘图表面尺寸不一致时，浏览器就会通过缩放绘图表面尺寸使其与canvas尺寸一致。在通过css设置的canvas尺寸大于默认绘图表面尺寸的情况下，一个绘图表面尺寸就相当于多个canvas尺寸，而绘图的时候是采用绘图表面的尺寸，这样就会造成图形变大，同时本应该显示在一个像素上的色值，现在要分布到多个像素上，就造成了色值的分散，从而造成模糊的视觉效果。

代码地址：https://codepen.io/wlei/pen/jvmvzJ?editors=0010