canvas性能优化,html5 canvas核心技术
使用缓存技术实现预绘制，减少重复绘制Canvs内容
很多时候我们在画布上绘图更新的时候，总是会保留一些不可更改的内容。对于这些内容
缓存应该提前绘制，而不是每次都刷新。
直接画代码如下：复制代码如下：
context.font= 24px Arial
context.fillStyle= blue
context.fillText(请按Esc退出游戏，5，50)；
requestAnimationFrame(render)；
使用缓存预绘制技术；复制代码代码如下：
函数呈现(上下文){
context.drawImage(mText_canvas，0，0)；
requestAnimationFrame(render)；
}
函数drawText(上下文){
mText _ canvas=document . createelement( canvas )；
mText _ canvas.width=450
mText _ canvas.height=54
var m _ context=mText _ canvas . get context( 2d )；
m _ context.font= 24px Arial
m _ context.fillStyle= blue
m_context.fillText(请按Esc退出游戏，5，50)；
}
使用画布缓存绘制技术时，必须记住缓存的画布对象的大小小于实际的画布大小。尽量把画直点的操作放在一起，尽量一次画好。坏代码如下：复制代码代码如下：
for(var I=0；I points . length-1；i ) {
var p1=点数[I]；
var p2=点数[I 1]；
context . begin path()；
context.moveTo(p1.x，P1 . y)；
context.lineTo(p2.x，p2 . y)；
context . stroke()；
}修改以后性能较高的代码如下：复制代码代码如下：
context . begin path()；
for(var I=0；I points . length-1；i ) {
var p1=点数[I]；
var p2=点数[I 1]；
context.moveTo(p1.x，P1 . y)；
context.lineTo(p2.x，p2 . y)；
}
context . stroke()；
避免画布绘制状态不必要的频繁切换。经常切换画图风格的例子如下：复制代码代码如下：
var GAP=10
for(var I=0；i10i ) {
context.fillStyle=(i % 2？蓝色:红色)；
context.fillRect(0，i * GAP，400，GAP)；
}
避免频繁切换绘图状态。性能较好的绘图代码如下：复制代码代码如下：
//偶数
context.fillStyle= red
for(var I=0；i5；i ) {
context.fillRect(0，(i*2) * GAP，400，GAP)；
}
//奇数
context.fillStyle= blue
for(var I=0；i5；i ) {
context.fillRect(0，(i*2 1) * GAP，400，GAP)；
}
画图时只画需要更新的区域，避免不必要的重复画图，随时产生额外费用。对于复杂场景渲染，采用分层渲染技术，分别分为前景渲染和背景渲染。它定义了画布层。
HTML如下：复制代码代码如下：
canvas id= BG width= 640 height= 480 style= position:absolute；z索引：0
/画布
canvas id= fg width= 640 height= 480 style= position:absolute；z索引：1
SPAN style= FONT-SIZE:18px /canvas
/SPAN
如果没有必要，尽量避免画特效，比如阴影、模糊等。避免使用浮点数坐标
画图形时，长度和坐标应该是整数，而不是浮点数。原因是Canvas支持半像素绘制，基于小数位的插值算法会实现绘制图像的抗锯齿效果。如果没有必要，请不要选择浮点数。清空Canvas上的绘制内容:
context.clearRect(0，0，canvas.width，canvas.height)
但Canvas中其实有一个类似hack的清空方法：
canvas.width=画布. width；
您也可以清除画布上的内容，但有些浏览器可能不支持。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。