JS学习--canvas优化

canvas优化

渲染相似的图像

myEntity.offscreenCanvas = document.createElement("canvas");myEntity.offscreenCanvas.width = myEntity.width;myEntity.offscreenCanvas.height = myEntity.height;myEntity.offscreenContext = myEntity.offscreenCanvas.getContext("2d");myEntity.render(myEntity.offscreenContext);

避免浮点数的坐标点

//当你画一个没有整数坐标点的对象时会发生子像素渲染。
ctx.drawImage(myImage, 0.3, 0.5);

避免使用drawImage缩放离屏canvas

在离屏canvas中缓存图片的不同尺寸，而不要用drawImage()去缩放它们。

使用多层画布画复杂场景

假设您有一个游戏，其UI位于顶部，中间是游戏性动作，底部是静态背景。 在这种情况下，您可以将游戏分成三个<canvas>层。 UI将仅在用户输入时发生变化，游戏层随每个新框架发生变化，并且背景通常保持不变。

<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>

#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 }

使用CSS 的transforms缩放canvas

CSS transforms 使用GPU，因此速度更快。

var scaleX = window.innerWidth / canvas.width;
var scaleY = window.innerHeight / canvas.height;
var scaleToFit = Math.min(scaleX, scaleY);
var scaleToCover = Math.max(scaleX, scaleY);
stage.style.transformOrigin = '0 0'; //scale from top left
stage.style.transform = 'scale(' + scaleToFit + ')';

关闭透明度

var ctx = canvas.getContext('2d', { alpha: false });