1.在頁面中加入canvas元素 eg： 註意：上面的代碼中增加了值為“diagonal”的ID特性，這樣做可以方便以後通過ID來快速找到canvas元素，對於任何cnavas對象來說，ID特性都是十分重要的，因為對canvas元素的所有操作都是通過腳本代碼控制的，沒有ID的話，想要找到要操作的ca ...
1.在頁面中加入canvas元素
eg：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Test02</title> 6 <script type="text/javascript" src="Test02.js"></script> 7 </head> 8 <body> 9 <!-- <div id="support"></div> --> 10 <canvas id="diagonal" style="border:1px solid;" width="200" height="200"></canvas> 11 </body> 12 </html>
註意：上面的代碼中增加了值為“diagonal”的ID特性，這樣做可以方便以後通過ID來快速找到canvas元素，對於任何cnavas對象來說，ID特性都是十分重要的，因為對canvas元素的所有操作都是通過腳本代碼控制的，沒有ID的話，想要找到要操作的canvas元素會很難。
執行效果圖如下：
2.在canvas中繪製一條對角線
Test02.js
1 function drawDiagonal(){ 2 //取得canvas元素及其繪圖上下文 3 var canvas=document.getElementById("diagonal"); 4 var context=canvas.getContext("2d"); 5 6 //用絕對坐標來創建一條路徑 7 context.beginPath(); 8 context.moveTo(70,140); 9 context.lineTo(140,70); 10 11 //將這條線繪製到canvas上 12 context.stroke(); 13 } 14 15 window.addEventListener("load",drawDiagonal,true);
以上代碼展示了使用HTML5 Canvas API的重要流程：
首先通過引用特定的canvas id值來獲取對canvas對象的訪問權，接著定義一個context變數，調用canvas對象的getContext方法，並且傳入希望使用的canvas類型，代碼清單中通過傳入“2d”倆獲取一個二維的上下文。
在代碼中調用了三個方法：beginPath，moveTo，lineTo，傳入了這條線的起點和終點。方法moveTo和lineTo實際上並不是畫線，而是在結束canvas操作的時候，通過調用context.stroke（）方法完成線條的繪製。
註意：
canvas中所有的操作都是通過上下文對象來完成的，所有涉及到視覺輸出效果的功能都只能通過上下文對象而不是畫布對象來使用。canvas中的很多設置樣式和外觀的函數不會直接修改顯示結果。只有當對路徑應用繪製（stroke）或是填充（fill）方法時，結果才會顯示出來，否則，只有在顯示圖像，顯示文本或是繪製，填充和清除矩形框的時候，canvas才會馬上更新。
