html5 Canvas画图教程(7)—canvas里画曲线之quadraticCurveTo方法

发布时间：2020-09-21 06:35:58 所属栏目：编程来源：网络整理

导读：本日讲quadraticCurveTo要领画曲线，quadratic的意思是二次，即数学中二次元方程谁人二次，接下来具体先容quadraticCurveTo要领的行使，感乐趣的伴侣可以相识下

继承讲canvas中画曲线的要领，本日讲quadraticCurveTo。
说真话这个要领有点吓人，单从函数名称上都可以初体验。话说，我认为有须要把这个函数名收缩。
quadratic的意思是二次，即数学中二次元方程谁人二次。而ctx.quadraticCurveTo的参数如下：

复制代码

代码如下:

ctx.quadraticCurveTo(x1,y1,x,y);

个中x,y是终点的坐标，而x1,y1曲直线节制点的坐标？什么？你问我出发点在那边？出发点在此之前用moveTo确定。
我之以是把节制点的坐标带上序号1，是由于后头讲的某个画曲线的函数有两个节制点，也就有x2,y2了，以是这里先打个提防针。
我们由moveTo确定的出发点和quadraticCurveTo自身确定的终点，可以毗连成一条直线，因为quadraticCurveTo只有一个节制点，这个节制点不是在直线左边，就是在直线右边，以是，quadraticCurveTo永久只能画弧线，照旧画不出S形。

为了便于领略，我照旧相沿上一篇文章的画帮助线的要领。起源代码如下：

复制代码

代码如下:

var x1=350,
y1 = 250,
x = 400,
y = 500;
ctx.beginPath();
ctx.strokeStyle="#000";
ctx.moveTo(300,300); //出发点
ctx.quadraticCurveTo(x1,y1,x,y); //正牌曲线
ctx.stroke();
ctx.beginPath();
ctx.strokeStyle = "rgba(255,0,0,0.5)";
ctx.moveTo(300,300);
ctx.lineTo(x1,y1);//本行与下一行是画节制点的线
ctx.lineTo(x,y);
ctx.moveTo(300,300);//开始毗连曲线的出发点和终点
ctx.lineTo(x,y);
ctx.stroke();

这里我画了两条帮助线，一条是出发点与终点的毗连线，一条是出发点到节制点再到终点的帮助线（着实是两条），这两条线的交汇点就是quadraticCurveTo的节制点坐标。

quadraticCurveTo也只能画弧形的曲线，不外这个弧形可以很犯科则，对比arc和arcTo，也算是一个前进了。
其它，quadraticCurveTo也不会像arcTo一样，呈现反转的环境。
虽然，假如你把节制点拉得很是远，也许图形也会变得让你不熟悉。我们来试一下：
“y1 = 950;
”我只是把y1改大了一些，然后曲线就超出canvas的范畴了。

不外，quadraticCurveTo画出的曲线的范畴，永久无法到达或高出节制点的坐标，我们只有把节制点“节制”好，就不消担忧了。
我写了一个简朴的可以动的示例页，展示了quadraticCurveTo画曲线的进程，但愿能帮你加深领略：

提醒：您可以先修改部门代码再运行

代码写的丑请多包容。

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

MySQL源码安置	运用图形界面从SQL导入
MySQL5.7+keepalived+	windows系统下jsp+mys