下面例子為用canvas標籤畫多條直線 複製代碼代碼如下: index_three 您的瀏覽器不支援canvas標籤。 <br />//取得Canvas物件(畫布) <br />var canvas = document.getElementById("myCanvas"); <br />/ /簡單地偵測目前瀏覽器是否支援Canvas對象，以免在一些不支援html5的瀏覽器中提示語法錯誤<br />if(canvas.getContext){ <br />//取得對應的CanvasRenderingContext2D對象(畫筆) <br />var ctx = canvas.getContext("2d"); <br />//線條的顏色<br />ctx.strokeStyle="#FF9933"; <br />//線條的寬度像素<br />ctx.lineWidth=10 ; <br />//線條的兩關形狀<br />ctx.lineCap="round"; <br />//注意，Canvas的座標係是：Canvas畫布的左上角為原點(0,0)，向右為橫座標，向下為縱座標，單位是像素(px)。 <br />//開始一個新的繪製路徑<br />ctx.beginPath(); <br />//定義直線的起點座標為(10,10) <br />ctx.moveTo(50, 50); <br />//定義直線的終點座標為(50,10) <br />ctx.lineTo(350, 250); <br />ctx.moveTo(50, 240); <br />ctx.lineTo(360, 60); <br />ctx.moveTo(50, 200); <br />ctx.lineTo(300, 40); <br />//沿著座標點順序的路徑繪製直線<br />ctx.stroke(); <br /> //關閉目前的繪製路徑<br />ctx.closePath(); <br />} <br />
