canvas03: 绘制一个三角形与closePath()用法

最新推荐文章于 2024-01-10 00:00:00 发布

蜡笔love小新

最新推荐文章于 2024-01-10 00:00:00 发布

阅读量408

点赞数

分类专栏： canvas 文章标签： canvas 前端

本文链接：https://blog.csdn.net/yellowmushroom/article/details/89343106

版权

canvas 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

步骤：

第一种：

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() 方法：创建从当前点到开始点的路径。

蜡笔love小新

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
canvas03: 绘制一个三角形与closePath()用法

步骤：第一种： 1.定义好画布与绘制工具上下文 2.定义第一条边的起点坐标 3.移动至第一条边的终点坐标 4.第二条边起点为第一条边的终点，移动到第二条边的终点坐标 5.第三条边起点为第二条边的终点坐标，起点为第一条边的起点坐标，三条线封闭形成三角形代码：<body> <canvas id="canvas" width="4...
复制链接

扫一扫

专栏目录