canvas09:lineJoin属性与设置折线拐点样式

最新推荐文章于 2022-08-23 19:37:26 发布

蜡笔love小新

最新推荐文章于 2022-08-23 19:37:26 发布

阅读量1.3k

点赞数 2

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

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

版权

canvas 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

lineJoin：设置两条线相交的拐点的样式。属性值为“bevel”、“round”、“miter”。

属性值	作用
bevel	创建斜角
round	创建圆角
miter	默认，尖角

案例：

绘制三条折线，并设置不同的拐点样式，比较不同。

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<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,100);
    ctx.lineTo(150,50);
    ctx.lineTo(250,100);
    ctx.strokeStyle = 'red';
    ctx.lineWidth = '25';
    // 使用bevel
    ctx.lineJoin = 'bevel';
    ctx.stroke();
    // 绘制第二条直线
    ctx.beginPath();
    ctx.moveTo(50,200);
    ctx.lineTo(150,150);
    ctx.lineTo(250,200);
    ctx.strokeStyle = 'green';
    ctx.lineWidth = '25';
    // 使用round
    ctx.lineJoin = 'round';
    ctx.stroke();
    // 绘制第三条直线
    ctx.beginPath();
    ctx.moveTo(50,300);
    ctx.lineTo(150,250);
    ctx.lineTo(250,300);
    ctx.strokeStyle = 'blue';
    ctx.lineWidth = '25';
    // 使用miter
    ctx.lineJoin = 'miter';
    ctx.stroke();
</script>

运行结果：

结论：

“bevel”为平角，"round"为圆角，“miter”为尖角。

蜡笔love小新

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
canvas09:lineJoin属性与设置折线拐点样式

lineJoin：设置两条线相交的拐点的样式。属性值为“bevel”、“round”、“miter”。属性值作用 bevel 创建斜角 round 创建圆角 miter 默认，尖角案例：绘制三条折线，并设置不同的拐点样式，比较不同。代码：<!DOCTYPE html><html lang="en"&gt...
复制链接

扫一扫