HTML5 Canvas 教程：一、畫布
一、HTML5畫布 HTML5 Canvas
1.1畫布元素Canvas Element
HTML5 Canvas元素是類似於<div>、<a>或<table>標記的HTML標記，其內容可通過JavaScript渲染呈現。要使用HTML5畫布，首先要在HTML文件內新增canvas標籤，然後使用JavaScript訪問canvas物件，並建立canvas的上下文（context）物件，通過呼叫HTML5畫布API方法繪製視覺化內容。
在使用canvas時，理解canvas元素和canvas上下文之間的差異是很重要的。canvas元素是嵌入在HTML頁面中的實際DOM節點，canvas上下文物件是一個具有屬性和方法的物件，通過呼叫canvas上下文物件的屬性和方法在畫布元素內繪製、渲染圖形。上下文可以是2D或WebGL（3D）。
每個canvas元素只能有一個上下文物件，如果我們多次呼叫getContext()方法，它將返回對同一個上下文物件的引用。
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px
padding: 0px;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="578" height="200"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
// do cool things with the context
context.font = '40pt Calibri';
context.fillStyle = 'blue';
context.fillText('Hello World!', 150, 100);
</script>
</body>
</html>
以上程式碼演示了在畫布上繪製藍色的Hello World文字。