`

[更新,bug修复了]chrome开启canvas 2D GPU加速后, clearRect的一个严重bug.

ChromeHTML5游戏浏览器
阅读更多
最新版的 chromium. 已经修复了这个bug

经过进一步测试 出现此问题的绝大多数是A卡

=======================================

新版chrome 为我们带来了GPU加速.
但是chrome的GPU加速一直问题多多.
例如 开启之后速度反而变慢.

最近我开发的一个HTML5游戏引擎 在chrome中开启 GPU Accelerated Canvas 2D 后,
画面更是完全乱掉.

花了很多时间去排查到底是我的程序有了问题 还是chrome的问题
,如果是chrome的问题, 那么到底是哪部分出了问题.

最近终于被我找到了, 原来是 clearRect 开启 GPU Accelerated Canvas 2D 后, 无法正常工作, 会出现"清除了不该清除的区域,而该清除的却没有清除".

我写了一个具体的例子之后发现, 清除区域居然发生了垂直翻转.
(该例子 先将画布涂黑, 然后调用clearRect清除一些区域,清除的区域变透明).

这么说可能不容易理解, 看图吧:


左边是其他支持HTML5 canvas的浏览器 以及 chrome关闭GPU加速后的正确结果.
右边则是开启GPU加速后 chrome的错误结果.

观察图片不能得出"发生了垂直翻转"的结论.

测试代码如下: 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="-1" />
<meta http-equiv="Cache-Control" content="no-cache" />

<title>Test</title>



<script type="text/javascript">

var clearData=[
	[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
	[0,8,8,0,0,0,0,0,0,0,0,0,0,8,0,0,0,0,0,0,0,0,0,0,0,8,8,0],
	[0,8,8,0,0,0,0,0,0,0,0,0,0,8,0,0,0,0,0,0,0,0,0,0,0,8,8,0],
	[0,0,0,0,0,0,0,0,0,0,0,0,0,8,8,8,8,0,0,0,0,0,0,0,0,0,0,0],
	[0,0,0,0,8,8,0,0,0,0,0,8,8,8,8,0,0,0,0,0,0,0,8,8,0,0,0,0],
	[0,0,0,0,8,8,0,0,0,0,0,0,0,0,8,0,0,0,0,0,0,0,8,8,0,0,0,0],
	[0,0,0,0,0,0,0,0,0,0,0,0,0,0,8,0,0,0,0,0,0,0,0,0,0,0,0,0],
	[0,0,0,0,0,0,0,8,8,0,0,0,0,0,0,0,0,0,0,8,8,0,0,0,0,0,0,0],
	[0,0,0,0,0,0,0,8,8,0,0,0,0,0,0,0,0,0,0,8,8,0,0,0,0,0,0,0],
	[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
	[0,0,0,0,0,0,0,0,0,0,8,8,0,0,0,0,8,8,0,0,0,0,0,0,0,0,0,0],
	[0,0,0,8,8,8,0,0,0,0,8,8,0,0,0,0,8,8,0,0,0,0,8,8,8,0,0,0],
	[0,0,0,8,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,8,0,0,0],
	[0,0,0,8,0,0,0,0,0,0,0,0,0,8,8,0,0,0,0,0,0,0,0,0,8,0,0,0],
	[0,8,8,8,0,0,0,0,0,0,0,0,0,8,8,0,0,0,0,0,0,0,0,0,8,8,8,0],
	[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]
]

function testCanvasClearRect(){

	var rectSize=16;
	var rows=clearData.length;
	var cols=clearData[0].length;
	

	var canvas = document.getElementById("canvas1");
	
	canvas.width= cols * rectSize ;
	canvas.height= rows * rectSize ;
	
	var ctx= canvas.getContext('2d');	
	// fill background with default color (black);
	ctx.fillRect(0, 0, canvas.width, canvas.height );
	
	for ( var r=0;r<rows;r++){
		for ( var c=0;c<cols;c++){	
		
			var no=clearData[r][c];			
			var nx= c * rectSize;
			var ny= r * rectSize;
			
			// if the number in the array === 0 , call clearRect 
			if (no === 0 ){
				ctx.clearRect(nx,ny, rectSize, rectSize);
			}
		}
	}
}



function init(){
	testCanvasClearRect()
}

</script>


</head> 
<body onload="init()"  > 

<canvas id="canvas1" style="border:1px solid blue;" ></canvas> 

</body> 
</html>



2
顶
6
踩
分享到：
| 简单说说1月8号的中国首届cocoa移动开发 ...
评论
1 楼 superobin 2011-02-17  
那天我再开启了2dcanvas加速的chrome上跑我之前写的boxorz原型结果同样出现了这类的问题，clearRect的很混乱完全没法看
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics