HTML5 Canvas 起步(1) - 基本概念_html5教學技巧-H5教程-PHP中文網

HTML5 Canvas 起步(1) - 基本概念_html5教學技巧

WBOY

發布： 2016-05-16 15:51:37

原創

1323 人瀏覽過

什麼是Canvas

儘管在 Mozilla 已經有不少關於 Canvas 的教程，我還是決定把自己的學習過程記錄下來。如果你覺得我寫的不夠明白，那麼你可以在參考資料中找到 Mozilla 網站上 Canvas 教學的連結。

另外，可以在這裡找到一些有趣的 Canvas 範例。

開始使用 Canvas

使用 Canvas 很簡單，與使用其他 HTML 元素一樣，只需要在頁面中新增一個

複製程式碼

程式碼如下:

當然，這樣只是簡單的創建了一個 Canvas 對象而已，並沒有對它進行任何操作，這個時候的 canvas 元素看上去與 div 元素是沒什麼區別的，在頁面上什麼都看不出來：）
另外，canvas 元素的大小可以透過 width 與 height 屬性來指定，這與 img 元素有點相似。
Canvas 的核心：Context
前面說到可以透過 JavaScript 來操作 Canvas 物件來進行繪製圖形、合成影像等操作，這些操作並不是透過 Canvas 是透過 Canvas 物件的一個方法 getContext 來取得 Canvas 操作上下文來進行。也就是說，在後面我們使用 Canvas 物件的過程中，都是與 Canvas 物件的 Context 打交道，而 Canvas 物件本身可以用來取得 Canvas 物件的大小等資訊。
要取得 Canvas 物件的 Context 很簡單，直接呼叫 canvas 元素的 getContext 方法即可，已呼叫的時候需要傳遞一個 Context 型參數，目前可用的且是唯一可用的類型值就是 2d：

提示：您可以先修改部分程式碼再執行

Firefox 3.0.x 的尴尬

Firefox 3.0.x 虽然支持了 canvas 元素，但是并没有完全按照规范来实现，规范中的 fillText、measureText 两个方法在 Firefox 3.0.x 中被几个 Firefox 特有的方法代替，因此在 Firefox 3.0.x 中使用 Canvas 时需要先 fix 这个几个方法在不同浏览器中的差别。

下面这代码取自 Mozilla Bespin 项目，它修正了 Firefox 3.0.x 中 Canvas 的 Context 对象与 HTML5 规范不一致的地方：

提示：您可以先修改部分代码再运行

注意：到 Opera 9.5 为止，Opera 还不支持 HTML5 规范中 Canvas 对象的 fillText 以及其相关方法和属性。

Hello, Canvas!

在对 Canvas 进行了一些初步了解后，开始来写我们的第一个 Canvas 程序，闻名的 HelloWorld 的又一个分支“Hello, Canvas”：

<canvas id="screen" width="400" height="400"></canvas> 
<script type="text/javascript"> 
(function() { 
var canvas = document.getElementById("screen"); 
var ctx = fixContext(canvas.getContext("2d")); 
ctx.font = "20pt Arial"; 
ctx.fillText("Hello, Canvas!", 20, 20); 
ctx.fillText("www.xujiwei.com", 20, 50); 
function fixContext(ctx) { 
// * upgrade Firefox 3.0.x text rendering to HTML 5 standard 
if (!ctx.fillText && ctx.mozDrawText) { 
ctx.fillText = function(textToDraw, x, y, maxWidth) { 
ctx.translate(x, y); 
ctx.mozTextStyle = ctx.font; 
ctx.mozDrawText(textToDraw); 
ctx.translate(-x, -y); 
}; 
} 
// * Setup measureText 
if (!ctx.measureText && ctx.mozMeasureText) { 
ctx.measureText = function(text) { 
if (ctx.font) ctx.mozTextStyle = ctx.font; 
var width = ctx.mozMeasureText(text); 
return { width: width }; 
}; 
} 
// * Setup html5MeasureText 
if (ctx.measureText && !ctx.html5MeasureText) { 
ctx.html5MeasureText = ctx.measureText; 
ctx.measureText = function(text) { 
var textMetrics = ctx.html5MeasureText(text); 
// fake it 'til you make it 
textMetrics.ascent = ctx.html5MeasureText("m").width; 
return textMetrics; 
}; 
} 
// * for other browsers, no-op away 
if (!ctx.fillText) { 
ctx.fillText = function() {}; 
} 
if (!ctx.measureText) { 
ctx.measureText = function() { return 10; }; 
} 
return ctx; 
} 
})(); 
</script>

提示：您可以先修改部分代码再运行

運行範例，Canvas 物件所在區域顯示出“Hello, World!”，這正是程式碼中 ctx.fillText("Hello, World!", 20, 20); 的功能。

fillText 以及相關屬性

fillText 方法用來在 Canvas 中顯示文字，它可以接受四個參數，其中最後一個是可選的：

void fillText(in DOMString text, in float x, in float y, [Optional] in float maxWidth);

其中 maxWidth 表示文字顯示時最大的寬度，可以防止文字溢出，不過我在測試中發現在 Firefox 與 Chomre 中指定了 maxWidth 時也沒有任何效果。

在使用 fillText 方法之前，可以透過設定 Context 的 font 屬性來調整顯示文字的字體，在上面的範例中我使用了「20pt Arial」來作為顯示文字的字體，而你可以自己設定不同的值來看具體的效果。

結束

暫時就到這裡了，我會一邊看規範一邊寫這個系列：）

參考資料

1. HTML5的Canvas，腳本語言的新舞台, hred

2. The Canvas Element, WHATWG