如何在上下文阴影画布HTML5/Javascript时提高性能？

  • Z时代
  • 2024-01-10
  • 分类：问答

我写了一个使用Javascript的Windows 8游戏metro样式。当我设置gameContext有阴影或透明时，我遇到了一个问题，导致游戏速度太慢。如何在上下文阴影画布HTML5/Javascript时提高性能？

ctx.shadowColor="black"; 
ctx.shadowBlur = 10; 
ctx.globalCompositeOperation = "lighter"; 
ctx.globalAlpha = 0.3;

如何提高游戏性能？

回答：

嗯......

不要使用阴影，因为他们是敌人的性能：http://www.html5rocks.com/en/tutorials/canvas/performance/

但是，你可以得到阴影效果，而无需使用阴影！

您可以戏剧性通过将您的对象保存为缓存图像加速绘制。下面是绘制阴影与绘制缓存图像的比较。使用缓存图像进行绘制的速度是的012倍以上然后使用阴影进行绘制。

这里是代码和一个小提琴：http://jsfiddle.net/m1erickson/7YcaC/

<!DOCTYPE HTML> 
<html> 
    <head> 
    <style> 
     body { margin: 0px; padding: 20px; } 
     canvas { border: 1px solid red; margin:10px; } 
    </style> 
    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 
    </head> 
    <body> 
    <p id="shadow">Redraw using shadows</p> 
    <canvas id="myCanvas1" width="220" height="120"></canvas><br/> 
    <p id="cache">Redraw using a cached image</p> 
    <canvas id="myCanvas2" width="220" height="120"></canvas> 
    <script> 
     var canvas1 = document.getElementById('myCanvas1'); 
     var context1 = canvas1.getContext('2d'); 
     var canvas2 = document.getElementById('myCanvas2'); 
     var context2 = canvas2.getContext('2d'); 
     // create a cache image of the shadowed rectangle 
     draw1(); 
     var image=new Image(); 
     image.src=canvas1.toDataURL(); 
     var t1=new Date().getTime(); 
     console.log(t1); 
     for(var i=0;i<100;i++){ draw1(); } 
     var t2=new Date().getTime(); 
     console.log(t2); 
     for(var i=0;i<100;i++){ draw2(); } 
     var t3=new Date().getTime();  
     console.log(t3); 
     alert((t2-t1)+"/"+(t3-t2)); 
     $("#shadow").text("Redraw using shadows took "+(t2-t1)+" ms"); 
     $("#cache").text("Redraw using cached image took "+(t3-t2)+" ms"); 
     function draw1(){ 
      context1.clearRect(0,0,220,120); 
      canvas1.width=220; 
      canvas1.height=120; 
      context1.rect(10, 10, 200, 100); 
      context1.fillStyle = 'red'; 
      context1.shadowColor = 'black'; 
      context1.shadowBlur = 10; 
      context1.shadowOffsetX = 5; 
      context1.shadowOffsetY = 5; 
      context1.fill(); 
     } 
     function draw2(){ 
      context2.clearRect(0,0,220,120); 
      context2.drawImage(image,0,0); 
     } 
    </script> 
    </body> 
</html>

回答：

我不知道，但有时这会有所帮助， 添加到您的CSS

canvas 
{ 
    -webkit-transform3d: translate(0,0,0); 
    -moz-transform3d: translate(0,0,0); 
    transform3d: translate(0,0,0); 
}

什么这实际上做的是，它迫使浏览器使用GPU呈现在画布上。因此性能提高。不幸的是，这种修复只适用于支持3D转换的浏览器。

以上是 如何在上下文阴影画布HTML5/Javascript时提高性能？ 的全部内容， 来源链接： utcz.com/qa/264513.html

回到顶部