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">
//通過id獲得當(dāng)前的Canvas對象
var canvasDom = document.getElementById("demoCanvas");
//通過Canvas Dom對象獲取Context的對象
var context = canvasDom.getContext("2d");
context.beginPath(); // 開始路徑繪制
context.moveTo(20, 20); // 設(shè)置路徑起點，坐標(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)行線的著色，這時整條線才變得可見
</script>
</body> 
