<canvas> 是 HTML5 新增的元素，可使用JavaScript腳本來(lái)繪制圖形。例如：畫(huà)圖，合成照片，創(chuàng)建動(dòng)畫(huà)甚至實(shí)時(shí)視頻處理與渲染。
WebGL使用<canvas>元素來(lái)用于網(wǎng)頁(yè)上的3D圖形硬件加速。
今天，我們使用canvas來(lái)畫(huà)一個(gè)正方形，了解其基本用法。
首先新建一個(gè)html文件：
<!doctype html>
<html lang="en">
<head>
<title>Canvas 的 HelloWorld</title>
</head>
<body>
</body>
</html>
canvas英語(yǔ)里面就是畫(huà)布的意思，我們作畫(huà)之前先把畫(huà)布放到網(wǎng)頁(yè)里面：
<canvas id="canvas"></canvas>
畫(huà)布算是放好了，id屬性可以讓我們?cè)诤竺娴腏avaScript代碼中選擇引用該元素（這里就是canvas畫(huà)布）。
function draw() {
var ctx = document.getElementById('canvas').getContext('2d');
ctx.font = "48px serif";
ctx.fillText("Hello world", 10, 50);
}
文本的樣式
有樣式的文本
在上面的例子用我們已經(jīng)使用了 font 來(lái)使文本比默認(rèn)尺寸大一些. 還有更多的屬性可以讓你改變canvas顯示文本的方式：
-
font = value
當(dāng)前我們用來(lái)繪制文本的樣式. 這個(gè)字符串使用和 CSS font 屬性相同的語(yǔ)法. 默認(rèn)的字體是 10px sans-serif。 -
textAlign = value
文本對(duì)齊選項(xiàng). 可選的值包括：start, end, left, right or center. 默認(rèn)值是 start。 -
textBaseline = value
基線對(duì)齊選項(xiàng). 可選的值包括：top, hanging, middle, alphabetic, ideographic, bottom。默認(rèn)值是 alphabetic。 -
direction = value
文本方向?？赡艿闹蛋ǎ簂tr, rtl, inherit。默認(rèn)值是 inherit。
如果你之前使用過(guò)CSS，那么這些選項(xiàng)你會(huì)很熟悉。
文本的測(cè)量
當(dāng)你需要獲得更多的文本細(xì)節(jié)時(shí)，下面的方法可以給你測(cè)量文本的方法。
measureText()
將返回一個(gè) TextMetrics對(duì)象的寬度、所在像素，這些體現(xiàn)文本特性的屬性。
下面的代碼段將展示如何測(cè)量文本來(lái)獲得它的寬度：
function draw() {
var ctx = document.getElementById('canvas').getContext('2d');
var text = ctx.measureText("foo"); // TextMetrics object
text.width; // 16;
}
總結(jié)
這里我們通過(guò)在canvas上寫(xiě)字對(duì)HTML5的canvas有一個(gè)初步印象。一般來(lái)說(shuō)就是放置畫(huà)布（canvas），獲取上下文（2D或WebGL），渲染輸出三個(gè)大的方向。
