canvas08:lineCap属性与绘制线两端样式

最新推荐文章于 2022-01-10 21:45:37 发布

蜡笔love小新

最新推荐文章于 2022-01-10 21:45:37 发布

阅读量1.6k

点赞数

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

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

版权

canvas 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

lineCap:用于绘制线条两端的样式。属性值有“butt”、“round”、“square”。

属性值	作用
butt	默认，线条的两端为平行的边缘
round	向线条的两端添加半圆形线帽
square	向线条的两端添加正方形线帽

案例：

绘制三条直线，分别使用lineCap的三个属性绘制末端，观察区别。

代码：

<body>
    <canvas id="mycanvas" width="500" height="500"></canvas>
</body>
</html>
<script>
    // 获得canvas
    var mycanvas = document.getElementById('mycanvas');
    // 获取上下文
    var ctx = mycanvas.getContext('2d');
    // 绘制第一条直线
    ctx.beginPath();
    ctx.moveTo(50, 50);
    ctx.lineTo(200,50);
    ctx.strokeStyle = 'red';
    ctx.lineWidth = 10;
    // 使用butt
    ctx.lineCap = 'butt';
    ctx.stroke();
    // 绘制第二条直线
    ctx.beginPath();
    ctx.moveTo(50, 100);
    ctx.lineTo(200,100);
    ctx.strokeStyle = 'green';
    ctx.lineWidth = 10;
    // 使用square
    ctx.lineCap = 'square';
    ctx.stroke();
    // 绘制第三条直线
    ctx.beginPath();
    ctx.moveTo(50, 150);
    ctx.lineTo(200,150);
    ctx.strokeStyle = 'blue';
    ctx.lineWidth = 10;
    // 使用round
    ctx.lineCap = 'round';
    ctx.stroke();
</script>

运行结果：

结论：

使用butt与square，直线两端的样式看似一样，均为方形。但是，square比butt两端要长。因为square相当与将两个正方形拼接到线条的两端，多处的部分就为正方形的长度。使用round，线条两端为半圆形，长度不butt要长，相当于将两个半圆拼接在线条的两端。所以，"round" 和 "square" 会使线条略微变长。

蜡笔love小新

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
canvas08:lineCap属性与绘制线两端样式

lineCap:用于绘制线条两端的样式。属性值有“butt”、“round”、“square”。属性值作用 butt 默认，线条的两端为平行的边缘 round 向线条的两端添加半圆形线帽 square 向线条的两端添加正方形线帽案例：绘制三条直线，分别使用lineCap的三个属性绘制末端，观察区别。代码：<body...
复制链接

扫一扫