Foundation HTML5 Canvas中的2处错误

     最近公司项目需要使用HTML5 Canvas开发公司大厅展示系统,当然这个项目还在进行中,不过我在进行另外一个新项目,等项目结束时,我将分享项目代码。学习HTML5 canvas主要书籍是《Foundation HTML5 Canvas For Games and Entertainment》,已经有中文版,名叫《HTML5 Canvas基础教程》。英文说中的实例有2处错误。

     第一处:Chapter4 Gradients小结中,实例代码:

var gradient = context.createLinearGradient(0, 0, 0, canvas.height());
gradient.addColorStop(0, "rgb(0, 0, 0)");
gradient.addColorStop(1, "rgb(255, 255, 255)");
context.fillStyle = gradient;
context.fillRect(0, 0, canvas.width(), canvas.height());

浏览器会提示canvas没有width方法,当然也没有height方法。经过搜索,width和height应该是canvas的属性,应该写canvas.width和canvas.height。

     第二处:在Chapter4 Exporting the canvas as an image中有一段代码

context.save();
context.fillRect(50, 50, 100, 100);
context.fillStyle = "rgb(255, 0, 0)";
context.fillRect(100, 100, 100, 100);
context.restore();
context.fillRect(150, 150, 100, 100);
var dataURL = canvas.get(0).toDataURL();

经过测试,发现canvas.get(0).toDataURL()在Chrome和Firefox都出现错误,提示canvas没有get方法。 查阅官方文档http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html。文档给出了2个方法:url = canvas . toDataURL( [ type, ... ])和canvas . toBlob(callback [, type, ... ]),使用canvas.toDataURL(),程序运行正确。

     关于翻译的问题,因为自己没有买《HTML5 Canvas基础教程》,不知道以上问题,中文翻译作者是否注意到。另外国内很多讲解HTML5教程或者博客中都没有涉及到HTML5 Canvas的旋转矩阵和平移矩阵,特别是使用HTML5 Canvas开发应用或者游戏,这2个矩阵左右很大,巧妙的使用它们可以给apps开发带来很大的帮助。

posted @ 2012-02-07 23:21  快乐八哥  阅读(468)  评论(0编辑  收藏  举报