Context 개체의 BeginPath 메서드는 경로 그리기 시작을 나타내고, moveTo(x, y) 메서드는 선분의 시작점을 설정하고, lineTo(x, y) 메서드는 선분의 끝점을 설정합니다. , 투명한 선분을 색칠하기 위해 획 방법을 사용합니다. moveto 및 lineto 메서드는 여러 번 사용할 수 있습니다. 마지막으로 closePath 메소드를 사용하면 현재 점에서 시작점까지 자동으로 직선을 그려 닫힌 도형을 형성할 수 있으므로 lineto 메소드를 한 번 사용할 필요가 없습니다.
코드는 다음과 같습니다.
<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>다음 섹션