前端图片上坐标连线_前端图形学基础（四）——Canvas绘制曲线

点击右上角的关注，不定期前端干货分享！！

前端图形学基础(一)——Canvas基础入门

前端图形学基础(二)——Canvas基础

前端图形学基础(三)——Canvas绘制图片

二次贝塞尔曲线

CanvasRenderingContext2D.quadraticCurveTo() 是 Canvas 2D API 新增二次贝塞尔曲线路径的方法。它需要2个点。 第一个点是控制点，第二个点是终点。其中需要注意的是起点就是我们通过moveTo来定义的。

void ctx.quadraticCurveTo(cpx, cpy, x, y);cpx：控制点的x坐标cpy：控制点的y坐标x：终点的x坐标y：终点的y坐标

举例：

context.beginPath();context.moveTo(0, 100);context.quadraticCurveTo(150, 200, 320, 100);context.stroke();

分析：绘制一条二次贝塞尔曲线需要3个点。起点、控制点、终点。从上面的代码分析，context.moveTo方法就是我们用到的起点。context.quadraticCurveTo方法有四个参数，前两个参数就是我们的控制点的坐标，后两参数就是终点的坐标。

效果：

一条美丽的弧线就绘制成功了

为了说明二次贝赛尔曲线的三个点的关系，我特意做了一个demo将他们的关系可视化出来了，效果如下：

看到这张图，应该容易联想到PS中的钢笔工具~~

看了这个效果，相信大家对二次贝赛尔曲线有了更深刻的理解了，源代码如下：

var {width,height} = canvas;var x = 0,y = 10;var speedX = 3,speedY = 3;var t = setInterval(()=>{  context.beginPath();context.clearRect(0,0,width,height);context.arc(x, y,4,0,Math.PI*2,false);context.fill();context.moveTo(x,y);context.lineTo(0,150);context.quadraticCurveTo(x, y, 320, 150);context.closePath();context.stroke();if(x>300){y+=speedY;speedX = 0;if(y>300){speedX = -3;}}if(speedX<0 && x<=0){clearInterval(t);}x+= speedX;},30);

源代码里面用到了一点点的物理中运动的知识。这也是前端图形学物理知识的基础。

其实不难看出来，二次贝赛尔曲线相对比较简单，因此解决的问题也是有限的，所以在canvas中还为我们提供了更为复杂的曲线。

三次贝赛尔曲线

void ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y); 这是mdn上给出的方法的参数。参照二次曲线我们不难得知这6个参数的意义。cpx1：第1个控制点的x坐标cpy1：第1个控制点的y坐标cpx2：第2个控制点的x坐标cpy2：第2个控制点的y坐标x：终点的x坐标y：终点的y坐标三次曲线就会有两个控制点来控制曲线的弯曲形式，接下来我们来用三次贝赛尔曲线实现一个类似于正弦曲线的线条吧~~

效果：

核心代码

总结

canvas可以绘制二次、三次贝赛尔曲线，起点都是我们通过moveTo方法来定义的，两个曲线的方法中分别有一个和两个控制点，最后两个参数均为结束点。他们的曲线绘制方法在上方的gif图中已有体现。

这里是【畅哥聊技术】前端图形学基础，更精彩的内容敬请关注，未完待续。。。