<canvas> 是 HTML5 新增的元素，可使用JavaScript腳本來繪制圖形荧缘。例如：畫圖皆警，合成照片，創(chuàng)建動畫甚至實時視頻處理與渲染截粗。
WebGL使用<canvas>元素來用于網(wǎng)頁上的3D圖形硬件加速信姓。
今天，我們使用canvas來畫一個正方形桐愉，了解其基本用法财破。
首先新建一個html文件：
<!doctype html>
<html lang="en">
<head>
<title>Canvas 的 HelloWorld</title>
</head>
<body>
</body>
</html>
canvas英語里面就是畫布的意思，我們作畫之前先把畫布放到網(wǎng)頁里面：
<canvas id="canvas"></canvas>
畫布算是放好了从诲，id屬性可以讓我們在后面的JavaScript代碼中選擇引用該元素（這里就是canvas畫布）。
function draw() {
var ctx = document.getElementById('canvas').getContext('2d');
ctx.font = "48px serif";
ctx.fillText("Hello world", 10, 50);
}
文本的樣式
有樣式的文本
在上面的例子用我們已經(jīng)使用了 font 來使文本比默認(rèn)尺寸大一些. 還有更多的屬性可以讓你改變canvas顯示文本的方式：
-
font = value
當(dāng)前我們用來繪制文本的樣式. 這個字符串使用和 CSS font 屬性相同的語法. 默認(rèn)的字體是 10px sans-serif靡羡。 -
textAlign = value
文本對齊選項. 可選的值包括：start, end, left, right or center. 默認(rèn)值是 start系洛。 -
textBaseline = value
基線對齊選項. 可選的值包括：top, hanging, middle, alphabetic, ideographic, bottom。默認(rèn)值是 alphabetic略步。 -
direction = value
文本方向描扯。可能的值包括：ltr, rtl, inherit趟薄。默認(rèn)值是 inherit绽诚。
如果你之前使用過CSS，那么這些選項你會很熟悉。
文本的測量
當(dāng)你需要獲得更多的文本細(xì)節(jié)時恩够，下面的方法可以給你測量文本的方法卒落。
measureText()
將返回一個 TextMetrics對象的寬度、所在像素蜂桶，這些體現(xiàn)文本特性的屬性儡毕。
下面的代碼段將展示如何測量文本來獲得它的寬度：
function draw() {
var ctx = document.getElementById('canvas').getContext('2d');
var text = ctx.measureText("foo"); // TextMetrics object
text.width; // 16;
}
總結(jié)
這里我們通過在canvas上寫字對HTML5的canvas有一個初步印象。一般來說就是放置畫布（canvas）扑媚，獲取上下文（2D或WebGL）腰湾，渲染輸出三個大的方向。
