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获得当前的Canvas对象
var canvasDom = document.getElementById("demoCanvas");
//通过Canvas Dom对象获取Context的对象
var context = canvasDom.getContext("2d");
context.beginPath(); // 开始路径绘制
context.moveTo(20, 20); // 设置路径起点，坐标为(20,20)
context.lineTo(200, 200); // 绘制一条到(200,20)的直线
context.lineTo(400, 20);
context.closePath();
context.lineWidth = 2.0; // 设置线宽
context.strokeStyle = "#CC0000"; // 设置线的颜色
context.stroke(); // 进行线的着色，这时整条线才变得可见
</script>
</body>bahagian seterusnya