Canvas元素是HTML5中新增的一個重要元素，專門用來繪製圖
形。在頁面上放置一個canvas元素，就相當於在頁面上放置了一塊“畫布”，可以在其中進行圖形的描繪。
語法格式：
<canvas></canvas>
注意，在canvas元素裏進行繪畫，並不是指拿鼠標來作畫。在網頁上使用canvas元素時，它會創建一塊矩形區域。默認情況下該矩形區域寬爲300像素，高爲150像素，用戶可以自定義具體的大小或者設置canvas元素的其他特性。在頁面中加入了canvas元素後，我們便可以通過JavaScript來自由地控制它。可以在其中添加圖片、線條以及文字，也可以在裏面繪圖，甚至還可以加入高級動畫。
簡單的例子：
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>canvas中的對角線示例</title>
</head>
<body>
<canvas id="djx" style="border: 1px solid;" width="200" height="200"> </canvas>
<script>
function drawDiagonal() {
// 取得canvas元素及其繪圖的上下文
var canvas = document.getElementById('djx');
var context = canvas.getContext('2d');
// 用絕對座標來創建一條路徑
context.beginPath();
context.moveTo(70, 140);
context.lineTo(140, 70);
// 將這條線繪製到canvas上
context.stroke();
}
window.addEventListener("load", drawDiagonal, true);
</script>
</body>
</html>
效果如下：
