キャンバスに線を描く
Context オブジェクトの beginPath メソッドはパスの描畫の開始を示し、moveTo(x, y) メソッドは線分の始點(diǎn)を設(shè)定し、lineTo(x, y) メソッドは線分の終點(diǎn)を設(shè)定します。ストローク法は、透明な線分に色を付けるために使用されます。 moveto メソッドと lineto メソッドは複數(shù)回使用できます。最後に、closePath メソッドを使用して、現(xiàn)在の點(diǎn)から開始點(diǎn)まで自動(dòng)的に直線を引いて閉じた図形を形成することもできるため、lineto メソッドを一度使用する必要がなくなります。
コードは次のとおりです:
<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(); // 開始路徑繪制
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> 
