一、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文字。