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

最新推荐文章于 2024-05-07 13:32:32 发布

fins

最新推荐文章于 2024-05-07 13:32:32 发布

阅读量994

点赞数

分类专栏： web前端文章标签： Chrome HTML5 游戏浏览器

web前端专栏收录该内容

85 篇文章 0 订阅

订阅专栏

最新版的 chromium. 已经修复了这个bug

[color=red]经过进一步测试出现此问题的绝大多数是A卡[/color]

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

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

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

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

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

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

这么说可能不容易理解, 看图吧:
[img]http://fins.iteye.com/upload/picture/pic/80616/f20666e8-f985-3a16-b1f0-a821764b5bf1.jpg[/img]

左边是其他支持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>