首先在html頁面放置一個canvas元素，其中canvas元素應該具備三個屬性ID、width、height。 複製程式碼程式碼如下: 取得canvas物件並取得上下文var cxt=document.getElementById('demo').getContext("2d");其中參數2d是確定的。 開始繪製，有兩種形式，一種是描邊（fill），一種是填充（stroke）。 javascript代碼： 複製代碼代碼如下: <br />var cxt=document.getElementById('demo').getContext("2d"); <br />cxt.beginPath(); <br />cxt.fillStyle="#F00" ;/*設定填滿顏色*/ <br />cxt.fillRect(0,0,200,100);/*繪製一個矩形，前兩個參數決定開始位置，後兩個分別是矩形的寬和高*/ <br />cxt .beginPath(); <br />cxt.strokeStyle="#000";/*設定邊框*/ <br />cxt.lineWidth=3;/*邊框的寬度*/ <br />cxt.strokeRect(0,120,200,100); 🎜>cxt.beginPath(); <br />cxt.moveTo(0,350); <br />cxt.lineTo(100,250); <br />cxt.lineTo(200,300); <br />cx./close*可;選取步驟，關閉繪製的路徑*/ <br />cxt.stroke(); <br /> 效果圖：
