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

fins

浏览: 2612591 次
性别:
来自: 小胖儿的大城

最近访客更多访客>>

快了的男孩

sagadan

fancycat

u012363178

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

web前端

Chrome HTML5 游戏浏览器

最新版的 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
踩

分享到：

gtg 备忘 | 简单说说1月8号的中国首届cocoa移动开发 ...

2011-01-24 15:54
浏览 9817
评论(1)
分类:Web前端
查看更多

1 楼 superobin 2011-02-17

那天我再开启了2dcanvas加速的chrome上跑我之前写的boxorz原型结果同样出现了这类的问题，clearRect的很混乱完全没法看

发表评论

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

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论