绘制贝塞尔曲线

[TOC] ## 贝塞尔曲线 1. 一次贝塞尔曲线其实是一条直线  2. 二次贝塞尔曲线  3. 三次贝塞尔曲线  ## 绘制二次贝塞尔曲线 ``` quadraticCurveTo(cp1x, cp1y, x, y) ``` * ​ 参数 1 和 2：控制点坐标 * ​ 参数 3 和 4：结束点坐标 实例 ``` var draw=()=>{ let canvas = document.querySelector("#tutorial"); if(!canvas.getContext)return; /** * @type CanvasRenderingContext2D */ let ctx = canvas.getContext("2d"); ctx.beginPath() ctx.moveTo(10,200) ctx.quadraticCurveTo(40,100,200,200) ctx.stroke() } ```  ## 绘制三次贝塞尔曲线 ``` bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) ``` * ​ 参数 1 和 2：控制点 1 的坐标 * ​ 参数 3 和 4：控制点 2 的坐标 * ​ 参数 5 和 6：结束点的坐标 实例 ``` var draw=()=>{ let canvas = document.querySelector("#tutorial"); if(!canvas.getContext)return; /** * @type CanvasRenderingContext2D */ let ctx = canvas.getContext("2d"); ctx.beginPath() ctx.moveTo(40,200) ctx.bezierCurveTo(20,100,100,120,200,200) ctx.stroke() } ```