How to improve performance when context shadow canvas HTML5/Javascript?

问题

I have written a Windows 8 game metro style using Javascript. I have a problem that makes the game too slow when I set gameContext with shadow or transparent.

ctx.shadowColor="black";
ctx.shadowBlur = 10; 

ctx.globalCompositeOperation = "lighter";
ctx.globalAlpha = 0.3;

How can I improve the game's performance?

回答1:

Well…

Don’t use shadows because they are the enemy of performance: http://www.html5rocks.com/en/tutorials/canvas/performance/

But, you can get shadowed results without using shadows!

You can dramatically speed up your draws by saving your objects as cached images. Below is a comparision of drawing with shadows versus drawing a cached image. Drawing with cached images is hundreds of times faster then drawing with shadows.

enter image description here

Here is code and a Fiddle: 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>

回答2:

I am not sure but this sometimes helps, Add this to your css

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

What this actually does is that it forces the browser to use GPU to render the canvas. And hence increase in the performance. Unfortunately, this fix is only for browsers which support 3d transformations.

来源：https://stackoverflow.com/questions/15706856/how-to-improve-performance-when-context-shadow-canvas-html5-javascript

标签

javascript

html5-canvas