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

本文介绍了上下文阴影画布HTML5/Javascript时如何提高性能?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我已经使用Javascript编写了Windows 8游戏Metro风格.我有一个问题，当我将 gameContext 设置为阴影或透明时，会使游戏太慢.

  ctx.shadowColor ="black";ctx.shadowBlur = 10;ctx.globalCompositeOperation =更轻"；ctx.globalAlpha = 0.3;

如何改善游戏性能?

解决方案

好吧……

不要使用阴影，因为阴影是性能的敌人:

 <！DOCTYPE HTML>< html>< head>< style>正文{边距:0像素；内边距:20px;}画布{边框:1px纯红色；边距:10px;}</style>< script type ="text/javascript" src ="http://code.jquery.com/jquery.min.js"></script></head><身体>< p id ="shadow">使用阴影重画</p>< canvas id ="myCanvas1" width ="220" height ="120"></canvas>< br/>< p id ="cache">使用缓存的图像重绘</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');//创建阴影矩形的缓存图像draw1();var image = new Image();image.src = canvas1.toDataURL();var t1 = new Date().getTime();console.log(t1);for(var i = 0; i

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?

解决方案

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.

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>

这篇关于上下文阴影画布HTML5/Javascript时如何提高性能?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！