Canvas melukis garisan
Kaedah beginPath bagi objek Konteks menunjukkan untuk mula melukis laluan, kaedah moveTo(x, y) menetapkan titik permulaan segmen garisan, kaedah lineTo(x, y) menetapkan titik akhir segmen garisan , dan kaedah strok digunakan untuk mewarnai segmen garisan lutsinar. Kaedah moveto dan lineto boleh digunakan beberapa kali. Akhir sekali, anda juga boleh menggunakan kaedah closePath untuk melukis garis lurus secara automatik dari titik semasa ke titik permulaan untuk membentuk angka tertutup, menghapuskan keperluan untuk menggunakan kaedah lineto sekali.
Kodnya adalah seperti berikut:
<body>
<canvas id="demoCanvas" width="500" height="600">
</canvas>
<script type="text/javascript">
//通過(guò)id獲得當(dāng)前的Canvas對(duì)象
var canvasDom = document.getElementById("demoCanvas");
//通過(guò)Canvas Dom對(duì)象獲取Context的對(duì)象
var context = canvasDom.getContext("2d");
context.beginPath(); // 開(kāi)始路徑繪制
context.moveTo(20, 20); // 設(shè)置路徑起點(diǎn)，坐標(biāo)為(20,20)
context.lineTo(200, 200); // 繪制一條到(200,20)的直線
context.lineTo(400, 20);
context.closePath();
context.lineWidth = 2.0; // 設(shè)置線寬
context.strokeStyle = "#CC0000"; // 設(shè)置線的顏色
context.stroke(); // 進(jìn)行線的著色，這時(shí)整條線才變得可見(jiàn)
</script>
</body> 
