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">
//通過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(); // 進行線的著色，這時整條線才變得可見
</script>
</body> 
