🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
[TOC] ## 贝塞尔曲线 1. 一次贝塞尔曲线其实是一条直线 ![](https://www.runoob.com/wp-content/uploads/2018/12/240px-b_1_big.gif) 2. 二次贝塞尔曲线 ![](https://www.runoob.com/wp-content/uploads/2018/12/b_2_big.gif) 3. 三次贝塞尔曲线 ![](https://www.runoob.com/wp-content/uploads/2018/12/b_3_big.gif) ## 绘制二次贝塞尔曲线 ``` 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() } ``` ![](https://img.kancloud.cn/a8/77/a87715dfc24d897081ffc377a53716dc_263x217.png) ## 绘制三次贝塞尔曲线 ``` 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() } ```