当前位置：首页 > news >正文

贝塞尔曲线详细讲解，如何用 Canvas 绘制三阶贝塞尔曲线？

news 2025/8/21 14:53:03

比如我们要画一个这样的曲线，我们该怎么画了

两个点Y轴一样高，起点：（200,100）终点：（300，100）中间的弧度怎么弄了？

  <canvas id="c1" width="600" height="400"></canvas><script>// 1. 找到画布var c1 = document.getElementById("c1");// 判断是否有getContextif (!c1.getContext) {console.log("当前浏览器不支持canvas，请下载最新的浏览器");}// 2. 获取画笔，上下文对象var ctx = c1.getContext("2d");ctx.beginPath();// 起点ctx.moveTo(200,100)//终点var zh=[300,100]//控制点1的（190,50）也是按照横纵坐标//控制点2（280,70）也是按照横纵坐标ctx.bezierCurveTo(190,50,280,70,zh[0],zh[1]);ctx.stroke();ctx.closePath();</script>

ctx.bezierCurveTo(190,50,280,70,zh[0],zh[1]);
一共6个参数，起那两个为控制点横纵坐标，最后两个参数为终点的横纵坐标。中间控制点可以不止两个

这样就出现了，不像的话可以详细调整数值。

<canvas id="c1" width="600" height="400"></canvas><script>// 1. 找到画布var c1 = document.getElementById("c1");// 判断是否有getContextif (!c1.getContext) {console.log("当前浏览器不支持canvas，请下载最新的浏览器");}// 2. 获取画笔，上下文对象var ctx = c1.getContext("2d");ctx.beginPath();// 起点ctx.moveTo(200,100)//终点var zh=[300,100]//控制点1的（190,50）也是按照横纵坐标//控制点2（280,70）也是按照横纵坐标ctx.bezierCurveTo(190,50,280,70,200,150);// 第二个起点ctx.moveTo(200,150)ctx.bezierCurveTo(120,70,210,50,200,100);ctx.stroke();ctx.closePath();</script>