所以我遇到的问题是，在开发HTML5画布应用程序时，我需要使用大量转换（即翻译，旋转，缩放），因此需要对context.save进行大量调用（ ）和context.restore（）。即使绘图很少，性能也会很快下降（因为在循环中尽可能多地调用save（）和restore（））。有没有替代使用这些方法，但仍然能够使用转换？谢谢！
答案 0 :(得分：13)
避免保存还原
使用setTransform可以消除保存和恢复的需要。
保存恢复的原因有很多，这会降低速度，这取决于当前的GPU＆amp;＆amp; 2D上下文状态。如果您将当前的填充和/或笔触样式设置为较大的图案，或者您具有复杂的字体/渐变，或者您正在使用过滤器（如果可用），则保存和恢复过程可能需要比渲染图像更长的时间。 / p>
在为动画和游戏写作时，性能就是一切，对我而言，它是关于精灵计数的。我可以在每帧（第60秒）绘制的精灵越多，我可以添加的FX越多，环境越详细，游戏越好。
我将状态保持开放状态，即我没有详细跟踪当前的2D上下文状态。这样我就不必使用保存和恢复。
ctx.setTransform而不是ctx.transform
因为变换函数变换，旋转，缩放，平移乘以当前变换，所以很少使用它们，因为我不知道变换状态是什么。
为了处理未知，我使用完全取代当前转换矩阵的setTransform。这也允许我在一次调用中设置比例和平移，而无需知道当前状态是什么。
ctx.setTransform(scaleX,0,0,scaleY,posX,posY); // scale and translate in one call
我还可以添加旋转，但javascript代码可以找到x，y轴向量（setTransform中的前4个数字）比旋转慢。
精灵并渲染
下面是一个扩展的精灵功能。它从精灵表中绘制一个精灵，精灵有x＆amp; y比例，位置和中心，因为我总是使用alpha，所以设置alpha也是
// image is the image. Must have an array of sprites
// image.sprites = [{x:0,y:0,w:10,h:10},{x:20,y:0,w:30,h:40},....]
// where the position and size of each sprite is kept
// spriteInd is the index of the sprite
// x,y position on sprite center
// cx,cy location of sprite center (I also have that in the sprite list for some situations)
// sx,sy x and y scales
// r rotation in radians
// a alpha value
function drawSprite(image, spriteInd, x, y, cx, cy, sx, sy, r, a){
var spr = image.sprites[spriteInd];
var w = spr.w;
var h = spr.h;
ctx.setTransform(sx,0,0,sy,x,y); // set scale and position
ctx.rotate(r);
ctx.globalAlpha = a;
ctx.drawImage(image,spr.x,spr.y,w,h,-cx,-cy,w,h); // render the subimage
}
在普通机器上，您可以使用该功能以全帧速率渲染1000 +精灵。在Firefox（写作时）我得到2000+的功能（精灵是从1024乘2048精灵表中随机选择的精灵）最大精灵大小256 * 256
但我有超过15个这样的功能，每个功能都具有最小的功能来做我想要的。如果它从未旋转或缩放（即用于UI），那么
function drawSprite(image, spriteInd, x, y, a){
var spr = image.sprites[spriteInd];
var w = spr.w;
var h = spr.h;
ctx.setTransform(1,0,0,1,x,y); // set scale and position
ctx.globalAlpha = a;
ctx.drawImage(image,spr.x,spr.y,w,h,0,0,w,h); // render the subimage
}
或者最简单的玩精灵，粒子，子弹等
function drawSprite(image, spriteInd, x, y,s,r,a){
var spr = image.sprites[spriteInd];
var w = spr.w;
var h = spr.h;
ctx.setTransform(s,0,0,s,x,y); // set scale and position
ctx.rotate(r);
ctx.globalAlpha = a;
ctx.drawImage(image,spr.x,spr.y,w,h,-w/2,-h/2,w,h); // render the subimage
}
如果是背景图片
function drawSprite(image){
var s = Math.max(image.width / canvasWidth, image.height / canvasHeight); // canvasWidth and height are globals
ctx.setTransform(s,0,0,s,0,0); // set scale and position
ctx.globalAlpha = 1;
ctx.drawImage(image,0,0); // render the subimage
}
播放场通常可以缩放，平移和旋转。为此我保持一个闭包变换状态（上面的所有全局变量都关闭变量和渲染对象的一部分）
// all coords are relative to the global transfrom
function drawGlobalSprite(image, spriteInd, x, y, cx, cy, sx, sy, r, a){
var spr = image.sprites[spriteInd];
var w = spr.w;
var h = spr.h;
// m1 to m6 are the global transform
ctx.setTransform(m1,m2,m3,m4,m5,m6); // set playfield
ctx.transform(sx,0,0,sy,x,y); // set scale and position
ctx.rotate(r);
ctx.globalAlpha = a * globalAlpha; (a real global alpha)
ctx.drawImage(image,spr.x,spr.y,w,h,-cx,-cy,w,h); // render the subimage
}
以上所有内容与实际游戏精灵渲染速度一样快。
常规提示
永远不要使用任何矢量类型渲染方法（除非你有空闲的帧时间），例如fill，stroke，filltext，arc，rect，moveTo，lineTo，因为它们是瞬间减速。如果需要渲染文本，请创建一个屏幕外画布，渲染一次，然后显示为精灵或图像。
图像尺寸和GPU内存
创建内容时，请始终使用图像尺寸的电源规则。 GPU处理大小为2.（2,4,8,16,32,64,128 ......）的图像，因此宽度和高度必须是2的幂。即1024×512或2048×128是好的尺寸。
当您不使用这些尺寸时，2D背景并不关心，它的作用是扩展图像以适应最接近的力量。因此，如果我有一个300乘300的图像以适应GPU上的图像，则必须将图像扩展到最接近的功率，即512×512。因此实际的内存占用量比您能够的像素大2.5倍显示。当GPU耗尽本地内存时，它将开始从主板RAM切换内存，当发生这种情况时，您的帧速率将降至无法使用。
确保您对图像进行大小调整以便不浪费RAM意味着您可以在进入RAM墙之前将更多内容打包到游戏中（对于较小的设备来说并不多）。
GC是theef的主要框架
最后一个优化是确保GC（垃圾收集器）几乎无所事事。在主循环中，避免使用new（重用和对象而不是取消引用它并创建另一个），避免从数组推送和弹出（保持长度不落）保持单独的活动项计数。创建自定义迭代器并推送项目上下文感知的函数（知道数组项是否处于活动状态）。推送时除非没有非活动项目，否则不要推送新项目，当项目变为非活动状态时，将其保留在数组中并在以后需要时使用。
我称之为快速堆栈的简单策略超出了本答案的范围，但可以使用ZERO GC负载处理1000个瞬态（短期）游戏对象。一些更好的游戏引擎使用类似的approch（池阵列提供非活动项池）。
GC应该低于游戏活动的5％，如果不是，你需要找到你不必要的创建和解除引用的地方。