???? 最近公司項目需要使用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開發帶來很大的幫助。

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。