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 = 600canvas.height = 400document.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 的线条 strokecontext.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>
