上下文阴影画布 HTML5/Javascript 时如何提高性能？
goo*_*ose 1 javascript html5-canvas
我使用 Javascript 编写了一个 Windows 8 游戏 Metro 风格。gameContext我有一个问题，当我设置阴影或透明时，游戏速度太慢。
ctx.shadowColor="black";
ctx.shadowBlur = 10;
ctx.globalCompositeOperation = "lighter";
ctx.globalAlpha = 0.3;
我怎样才能提高游戏的性能？
嗯\xe2\x80\xa6
\n\n不要\xe2\x80\x99t 使用阴影，因为它们是性能的敌人： http://www.html5rocks.com/en/tutorials/canvas/performance/
\n\n但是，您可以在不使用阴影的情况下获得阴影结果！
\n\n通过将对象保存为缓存图像，您可以显着加快绘制速度。下面是使用阴影绘制与绘制缓存图像的比较。使用缓存图像进行绘制比使用阴影进行绘制要快数百倍。
\n\n
这是代码和小提琴：http ://jsfiddle.net/m1erickson/7YcaC/
\n\n<!DOCTYPE HTML>\n<html>\n <head>\n <style>\n body { margin: 0px; padding: 20px; }\n canvas { border: 1px solid red; margin:10px; }\n </style>\n <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>\n </head>\n <body>\n <p id="shadow">Redraw using shadows</p>\n <canvas id="myCanvas1" width="220" height="120"></canvas><br/>\n <p id="cache">Redraw using a cached image</p>\n <canvas id="myCanvas2" width="220" height="120"></canvas>\n <script>\n var canvas1 = document.getElementById(\'myCanvas1\');\n var context1 = canvas1.getContext(\'2d\');\n var canvas2 = document.getElementById(\'myCanvas2\');\n var context2 = canvas2.getContext(\'2d\');\n\n // create a cache image of the shadowed rectangle\n draw1();\n var image=new Image();\n image.src=canvas1.toDataURL();\n\n var t1=new Date().getTime();\n console.log(t1);\n for(var i=0;i<100;i++){ draw1(); }\n var t2=new Date().getTime();\n console.log(t2);\n for(var i=0;i<100;i++){ draw2(); }\n var t3=new Date().getTime(); \n console.log(t3);\n alert((t2-t1)+"/"+(t3-t2));\n $("#shadow").text("Redraw using shadows took "+(t2-t1)+" ms");\n $("#cache").text("Redraw using cached image took "+(t3-t2)+" ms");\n\n function draw1(){\n context1.clearRect(0,0,220,120);\n canvas1.width=220;\n canvas1.height=120;\n context1.rect(10, 10, 200, 100);\n context1.fillStyle = \'red\';\n context1.shadowColor = \'black\';\n context1.shadowBlur = 10;\n context1.shadowOffsetX = 5;\n context1.shadowOffsetY = 5;\n context1.fill();\n }\n\n function draw2(){\n context2.clearRect(0,0,220,120);\n context2.drawImage(image,0,0);\n }\n\n </script>\n </body>\n</html>\n- 如果您在 2020 年运行 jsfiddle，它们的性能几乎相同。在我的机器上运行 Chrome 81 `draw1()` 需要 3ms，`draw2()` 需要 2ms。我认为这是因为现在画布图形默认是 GPU 加速的，而在 2013 年情况并非总是如此。 (2认同)
| 归档时间： |
|
| 查看次数： |
3112 次 |
| 最近记录： |