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


Posted in HTML / CSS onJanuary 09, 2013

继续讲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的控制点坐标。

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


quadraticCurveTo也只能画弧形的曲线,不过这个弧形可以很不规则,相比arc和arcTo,也算是一个进步了。
另外,quadraticCurveTo也不会像arcTo一样,出现反转的情况。
当然,如果你把控制点拉得非常远,可能图形也会变得让你不认识。我们来试一下:
“y1 = 950;
”我只是把y1改大了一些,然后曲线就超出canvas的范围了。

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


不过,quadraticCurveTo画出的曲线的范围,永远无法达到或超过控制点的坐标,我们只有把控制点“控制”好,就不用担心了。
我写了一个简单的可以动的示例页,展示了quadraticCurveTo画曲线的过程,希望能帮你加深理解: 

提示:您可以先修改部分代码再运行

代码写的丑请多包涵。
HTML / CSS 相关文章推荐
CSS3教程(9):设置RGB颜色
Apr 02 HTML / CSS
基于css3的属性transition制作菜单导航效果
Sep 01 HTML / CSS
CSS3实现大小不一的粒子旋转加载动画
Apr 21 HTML / CSS
通过css3的filter滤镜改变png图片的颜色的示例代码
May 06 HTML / CSS
CSS3中引入多种自定义字体font-face
Jun 12 HTML / CSS
HTML5本地数据库基础操作详解
Apr 26 HTML / CSS
HTML5 文件上传下载的实例代码
Jul 03 HTML / CSS
浅谈Html5移动端ios/Android兼容性总结
Jun 01 HTML / CSS
详解Html5页面实现下载文件(apk、txt等)的三种方式
Oct 22 HTML / CSS
HTML5的postMessage的使用手册
Dec 19 HTML / CSS
HTML5简单实现添加背景音乐的几种方法
May 12 HTML / CSS
CSS中calc(100%-100px)不加空格不生效
May 07 HTML / CSS
html5 Canvas画图教程(6)—canvas里画曲线之arcTo方法
Jan 09 #HTML / CSS
html5 Canvas画图教程(5)—canvas里画曲线之arc方法
Jan 09 #HTML / CSS
html5 Canvas画图教程(4)—未闭合的路径及渐变色的填充方法
Jan 09 #HTML / CSS
html5 Canvas画图教程(3)—canvas出现1像素线条模糊不清的原因
Jan 09 #HTML / CSS
html5 Canvas画图教程(2)—画直线与设置线条的样式如颜色/端点/交汇点
Jan 09 #HTML / CSS
html5 Canvas画图教程(1)—画图的基本常识
Jan 09 #HTML / CSS
使用html5+css3来实现slider切换效果告别javascript+css
Jan 08 #HTML / CSS
You might like
基于PHP 面向对象之成员方法详解
2013/05/04 PHP
php给一组指定关键词添加span标签的方法
2015/03/31 PHP
PHP+MySQL统计该库中每个表的记录数并按递减顺序排列的方法
2016/02/15 PHP
javascript当中的代码嗅探扩展原生对象和原型(prototype)
2013/01/11 Javascript
商城常用滚动的焦点图效果代码简单实用
2013/03/28 Javascript
基于JavaScript实现继承机制之构造函数+原型链混合方式的使用详解
2013/05/07 Javascript
qq悬浮代码(兼容各个浏览器)
2014/01/29 Javascript
jQuery实现简单的间隔向上滚动效果
2015/03/09 Javascript
ajax如何实现页面局部跳转与结果返回
2015/08/24 Javascript
纯javascript响应式树形菜单效果
2015/11/10 Javascript
BootStrap实现轮播图效果(收藏)
2016/12/30 Javascript
vue项目中使用lib-flexible解决移动端适配的问题解决
2018/08/23 Javascript
VUE+Element环境搭建与安装的方法步骤
2019/01/24 Javascript
vue中axios防止多次触发终止多次请求的示例代码(防抖)
2020/02/16 Javascript
详解为什么Vue中不要用index作为key(diff算法)
2020/04/04 Javascript
[49:15]DOTA2-DPC中国联赛 正赛 CDEC vs XG BO3 第二场 1月19日
2021/03/11 DOTA
使用python在本地电脑上快速处理数据
2017/06/22 Python
Python代码实现KNN算法
2017/12/20 Python
python更改已存在excel文件的方法
2018/05/03 Python
python3结合openpyxl库实现excel操作的实例代码
2018/09/11 Python
python中时间模块的基本使用教程
2019/05/14 Python
python对数组进行排序,并输出排序后对应的索引值方式
2020/02/28 Python
Python 多进程、多线程效率对比
2020/11/19 Python
使用HTML5 Geolocation实现一个距离追踪器
2018/04/09 HTML / CSS
医药工作者的求职信范文
2013/09/21 职场文书
二年级语文教学反思
2014/02/02 职场文书
优秀团支部事迹材料
2014/02/08 职场文书
鲜花方阵解说词
2014/02/13 职场文书
《燕子专列》教学反思
2014/02/21 职场文书
一句话工作感言
2014/03/01 职场文书
毕业生写求职信的要点
2014/03/04 职场文书
公司聘任书模板
2014/03/29 职场文书
什么是就业协议书
2014/04/17 职场文书
秋季运动会广播稿(30篇)
2014/09/13 职场文书
2016年公司新年寄语
2015/08/17 职场文书
《我的长生果》教学反思
2016/02/20 职场文书