13-线段的转折点样式-CSDN博客

本文链接：https://blog.csdn.net/gaowxx/article/details/144968159

13-线段的转折点样式_哔哩哔哩_bilibili13-线段的转折点样式是一次性学会 Canvas 动画绘图（核心精讲+50个案例）2023最新教程的第14集视频，该合集共计53集，视频收藏或关注UP主，及时了解更多相关视频内容。https://www.bilibili.com/video/BV16T411B7kP?spm_id_from=333.788.videopod.episodes&vd_source=9218320e7bcc2e793fa8493559f4acd7&p=14

https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/lineJoin

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
</body>
<script>
    // 1.创建canvas标签
    const canvas = document.createElement('canvas')
    canvas.width = 600
    canvas.height = 400
    document.body.append(canvas)
    // 2.得到context对象
    const context = canvas.getContext('2d')

    // 把线条加粗
    context.lineWidth = 20

    // 实现渐变
    let g = context.createLinearGradient(100, 100, 500, 100)
    g.addColorStop(0, 'yellow')
    g.addColorStop(0.25, 'orange')
    g.addColorStop(0.75, 'pink')
    g.addColorStop(1, 'purple')

    // 把渐变赋值给 context 的线条 stroke
    context.strokeStyle = g

    // 修改线段的转角样式
    // context.lineCap = 'butt'
    context.lineCap = 'round'
    // context.lineCap = 'square'

    // context.lineJoin = 'miter'
    context.lineJoin = 'round'
    // context.lineJoin = 'bevel'

    // 先把折线画出来
    context.moveTo(100, 200)
    context.lineTo(200, 100)
    context.lineTo(300, 50)
    context.lineTo(400, 200)
    context.lineTo(500, 100)
    context.stroke()
</script>

</html>