内容简介：Canvas 优化指南
Canvas 性能是一个非常值得关注的问题，这次用 Canvas 也同样遇到了需要性能优化的点：我们在之前使用 Canvas 实现了 background: cover
的效果，但是这导致了 resize 的反复绘制，CPU 使用率飙升。
使用离屏渲染
对于这种场景，MDN 中的解释是「在离屏canvas上预渲染相似的图形或重复的对象」。
当然，实际上，MDN 中的解释不够详细，既没有说明为什么使用离屏 Canvas，也没有离屏 Canvas 的意思：
我们可以把离屏 Canvas 理解为一个预渲染的机制，我们通过先绘制好整块图案，之后在局部区域时就不需要再进行反复的图片渲染，在 drawImage
中可以直接对图片进行裁剪。
处理前：
function render() {
draw(context); // 具体代码省略
}
增加了离屏渲染：
// 离屏渲染
var m_canvas = document.createElement('canvas');
m_canvas.width = 64; // 渲染整体
m_canvas.height = 64;
var m_context = m_canvas.getContext(‘2d’);
draw(m_context);
function render() {
context.drawImage(m_canvas, 0, 0);
}
对于一些监听后渲染，如果创建 Image 再进行渲染，会消耗大量 CPU，如果使用了离屏渲染，实测在高频事件（自己的是 window.resize
）中 CPU 使用率减少了一倍之多。
集中绘制
绘制操作会消耗比较多的资源，所以最好是一次绘制，将命令全部存储到缓冲区中。
优化前：
for (var i = 0; i < points.length - 1; i++) {
var p1 = points[i];
var p2 = points[i+1];
context.beginPath();
context.moveTo(p1.x, p1.y);
context.lineTo(p2.x, p2.y);
context.stroke();
}
优化后：
context.beginPath();
for (var i = 0; i < points.length - 1; i++) {
var p1 = points[i];
var p2 = points[i+1];
context.moveTo(p1.x, p1.y);
context.lineTo(p2.x, p2.y);
}
context.stroke();
避免浮点数坐标
浏览器为了抗锯齿会对浮点数进行额外的处理，可以通过数学类函数进行取整操作：
ctx.drawImage(myImage, Math.floor(0.3), Math.floor(0.5));
使用多个画布渲染复杂的场景
对于一些复杂的场景，可以将不变的场景和变化的物体进行区分渲染，下面是一段 demo，这样需要变更并渲染的像素更小：
<div id="stage">
<canvas id="ui-layer" width="480" height="320"></canvas>
<canvas id="game-layer" width="480" height="320"></canvas>
<canvas id="background-layer" width="480" height="320"></canvas>
</div>
<style>
#stage {
width: 480px;
height: 320px;
position: relative;
border: 2px solid black
}
canvas { position: absolute; }
#ui-layer { z-index: 3 }
#game-layer { z-index: 2 }
#background-layer { z-index: 1 }
</style>
扩展阅读
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
