上下文阴影画布HTML5/Javascript时如何提高性能? [英] How to improve performance when context shadow canvas 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 <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(使用阴影重画花费了" +(t2-t1)+"ms")；$(#cache").text(使用缓存的图像重绘花费了" +(t3-t2)+"ms")；函数draw1(){context1.clearRect(0,0,220,120);canvas1.width = 220;canvas1.height = 120;context1.rect(10，10，200，100);context1.fillStyle ='红色';context1.shadowColor ='黑色';context1.shadowBlur = 10;context1.shadowOffsetX = 5;context1.shadowOffsetY = 5;context1.fill();}函数draw2(){context2.clearRect(0,0,220,120);context2.drawImage(image，0,0);}</script></body></html> 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时如何提高性能?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
