<!DOCTYPE html> <html > <body> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;" > <!--創建畫布canvas,並且設置其id,寬度，高度，樣式 具體畫東西的過程放在script標籤裏 --> </canvas> <script type="text/javascript"> var c=document.getElementById("myCanvas"); /*獲取畫布myCanvas，c也就變成了myCanvas*/ var cxt= c.getContext("2d"); /*創建畫布上的畫筆cxt。通過cxt= c.getContext("2d")創建了在c上的畫筆，也就是在myCanvas上的畫筆*/ cxt.moveTo(10,10);/*將畫筆點移動到10，10*/ cxt.lineTo(150,50);/*從10，10畫一條線到150,50,此時畫筆座標也就移動到了150，50*/ cxt.lineTo(10,50); cxt.stroke();/*結束路徑，必須有的*/ </script> </body> </html>
思路解釋：
在body裏創建canvas標籤，就是畫布。
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;" > <!--創建畫布canvas,並且設置其id,寬度，高度，樣式 具體畫東西的過程放在script標籤裏 --> </canvas>
然後在script裏書寫畫畫函數，首先獲取創建的canvas 的id myCanvas，也就是獲取了canvas。
var c=document.getElementById("myCanvas"); /*獲取畫布myCanvas，c也就變成了myCanvas*/
接着 創建一個跟 myCanvas綁定的畫筆，通過畫筆函數來畫出圖像。
var cxt= c.getContext("2d"); /*創建畫布上的畫筆cxt。通過cxt= c.getContext("2d")創建了在c上的畫筆，也就是在myCanvas上的畫筆*/ cxt.moveTo(10,10);/*將畫筆點移動到10，10*/ cxt.lineTo(150,50);/*從10，10畫一條線到150,50,此時畫筆座標也就移動到了150，50*/ cxt.lineTo(10,50); cxt.stroke();/*結束路徑，必須有的*/