Canvas draw lines
The beginPath method of the Context object indicates to start drawing the path, the moveTo(x, y) method sets the starting point of the line segment, the lineTo(x, y) method sets the end point of the line segment, and the stroke method is used to color transparent line segments. The moveto and lineto methods can be used multiple times. Finally, you can also use the closePath method to automatically draw a straight line from the current point to the starting point to form a closed figure, eliminating the need to use the lineto method once.
The code is as follows:
<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í)整條線才變得可見
</script>
</body> 
