cvans绘画探索：如何绘制二阶贝塞尔曲线

下面我们继续看看二阶贝塞尔曲线是如何绘制的（代码非原创哦）。

 <canvas width="300" height="300" id="canvas"/>
<script>
// 0. 获取到页面上的 canvas 标签元素节点
const canvasEle = document.querySelector('#canvas')

// 1. 获取当前这个画布的工具箱
const ctx = canvasEle.getContext('2d')

// 2. 绘制二阶贝塞尔期限
ctx.beginPath()
ctx.moveTo(20, 170) // 起点, 描绘 p0 点位
// 语法 : ctx.quadraticCurveTo(p1 x坐标, p1 y坐标, p2 x坐标, p2 y坐标)
ctx.quadraticCurveTo(130, 40, 180, 150)
ctx.strokeStyle = 'red'
ctx.stroke()

</script>