HTML5 Canvas的性能提高技巧经验分享

HTML如下：

复制代码
<canvas id="bg" width="640" height="480" style="position: absolute; z-index: 0">
</canvas>
<canvas id="fg" width="640" height="480" style="position: absolute; z-index: 1">
<SPAN style="FONT-SIZE: 18px"></canvas>
</SPAN>

如果没有必要，要尽量避免使用绘制特效，如阴影，模糊等。

避免使用浮点数坐标
绘制图形时，长度与坐标应选取整数而不是浮点数，原因在于Canvas支持半个像素绘制会根据小数位实现插值算法实现绘制图像的反锯齿效果，如果没有必要请不要选择浮点数值。

清空Canvas上的绘制内容：
context.clearRect(0, 0, canvas.width,canvas.height)
但是其实在Canvas还有一种类似hack的清空方法：
canvas.width = canvas.width;
也可以实现清空canvas上内容的效果，但是在某些浏览器上可能不支持。