???? 最近公司項(xiàng)目需要使用HTML5 Canvas開發(fā)公司大廳展示系統(tǒng)，當(dāng)然這個(gè)項(xiàng)目還在進(jìn)行中，不過我在進(jìn)行另外一個(gè)新項(xiàng)目，等項(xiàng)目結(jié)束時(shí)，我將分享項(xiàng)目代碼。學(xué)習(xí)HTML5 canvas主要書籍是《Foundation HTML5 Canvas For Games and Entertainment》,已經(jīng)有中文版，名叫《HTML5 Canvas基礎(chǔ)教程》。英文說中的實(shí)例有2處錯(cuò)誤。

???? 第一處：Chapter4 Gradients小結(jié)中，實(shí)例代碼：

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());

瀏覽器會(huì)提示canvas沒有width方法，當(dāng)然也沒有height方法。經(jīng)過搜索，width和height應(yīng)該是canvas的屬性，應(yīng)該寫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();

經(jīng)過測(cè)試，發(fā)現(xiàn)canvas.get(0).toDataURL()在Chrome和Firefox都出現(xiàn)錯(cuò)誤，提示canvas沒有g(shù)et方法。?查閱官方文檔http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html。文檔給出了2個(gè)方法:url = canvas . toDataURL( [ type, ... ])和canvas . toBlob(callback [, type, ... ])，使用canvas.toDataURL()，程序運(yùn)行正確。

???? 關(guān)于翻譯的問題，因?yàn)樽约簺]有買《HTML5 Canvas基礎(chǔ)教程》，不知道以上問題，中文翻譯作者是否注意到。另外國(guó)內(nèi)很多講解HTML5教程或者博客中都沒有涉及到HTML5 Canvas的旋轉(zhuǎn)矩陣和平移矩陣，特別是使用HTML5 Canvas開發(fā)應(yīng)用或者游戲，這2個(gè)矩陣左右很大，巧妙的使用它們可以給apps開發(fā)帶來很大的幫助。

總結(jié)

以上是生活随笔為你收集整理的Foundation HTML5 Canvas中的2处错误的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。