Canvas 缓冲/离屏渲染
如果发现每一帧里有好多复杂的画图运算，那么考虑创建一个离屏 canvas，将图像在这个画布上画一次（或者每当图像改变的时候画一次），然后在每帧上画出视线以外的这个画布
<!DOCTYPE html> <meta charset="utf-8"> <canvas id="canvas-1" width="300" height="100"> </canvas> <script> var c = document.getElementById("canvas-1"); var ctx = c.getContext("2d"); var buffer_c = document.createElement("canvas"); buffer_c.width = c.width; buffer_.height = c.height; var buffer = buffer_c.getContext("2d"); buffer.fillStyle="green" buffer.fillRect(10,10,100,50); ctx.drawImage(buffer,0,0); </script>
运行结果如下