步骤:
第一种:
1.定义好画布与绘制工具上下文
2.定义第一条边的起点坐标
3.移动至第一条边的终点坐标
4.第二条边起点为第一条边的终点,移动到第二条边的终点坐标
5.第三条边起点为第二条边的终点坐标,起点为第一条边的起点坐标,三条线封闭形成三角形
代码:
<body>
<canvas id="canvas" width="400" height="400"></canvas>
</body>
</html>
<script>
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
// 起始点
ctx.moveTo(100, 100)
// 第一条边
ctx.lineTo(200, 100);
// 第二条边(起点为第一条边的终点)
ctx.lineTo(100, 200);
// 第三条边(起点为第二条边的终点,终点为第一条边的起点)
ctx.lineTo(100, 100);
// 描边
ctx.stroke();
</script>
效果:
当我们给每条边设置10px的宽度时:
代码:
// 第三条边(起点为第二条边的终点,终点为第一条边的起点)
ctx.lineTo(100, 100);
ctx.lineWidth = 10;
// 描边
ctx.stroke();
效果:
我们可以看到,当边框变粗的时候,第一条边与第三条边没有完全重合。我们可以使用closePath()闭合轨迹来闭合第一条线与第二条线。
步骤:
1.定义好画布与绘制工具上下文
2.定义第一条边的起点坐标
3.移动至第一条边的终点坐标
4.第二条边起点为第一条边的终点,移动到第二条边的终点坐标
5.使用closePath闭合轨迹
代码:
<body>
<canvas id="canvas" width="400" height="400"></canvas>
</body>
</html>
<script>
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
// 起始点
ctx.moveTo(100, 100);
// 第一条边
ctx.lineTo(200, 100);
// 第二条边(起点为第一条边的终点)
ctx.lineTo(100, 200);
// 第三条边(起点为第二条边的终点,终点为第一条边的起点)
// ctx.lineTo(100, 100);
ctx.closePath();
ctx.lineWidth = 10;
// 描边
ctx.stroke();
</script>
效果:
这样三角形三条边都可以完全重合。
closePath() 方法: 创建从当前点到开始点的路径。