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代码绘制可爱的Hello Kitty猫
Aug 03 HTML / CSS
全面解析CSS Media媒体查询使用操作(推荐)
Aug 15 HTML / CSS
CSS3实现任意图片lowpoly动画效果实例
May 11 HTML / CSS
CSS3动画animation实现云彩向左滚动
May 09 HTML / CSS
CSS3使用border-radius属性制作圆角
Dec 22 HTML / CSS
CSS3实现水平居中、垂直居中、水平垂直居中的实例代码
Feb 27 HTML / CSS
html5 Canvas画图教程(4)—未闭合的路径及渐变色的填充方法
Jan 09 HTML / CSS
HTML5实现多张图片上传功能
Mar 11 HTML / CSS
HTML5、Select下拉框右边加图标的实现代码(增进用户体验)
Oct 16 HTML / CSS
深入了解canvas在移动端绘制模糊的问题解决
Apr 30 HTML / CSS
将SVG图引入到HTML页面的实现
Sep 20 HTML / CSS
使用canvas对video视频某一刻截图功能
Sep 25 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新浪微博登录接口用法实例
2014/12/23 PHP
护卫神php套件 php版本升级方法(php5.5.24)
2015/05/10 PHP
PHP+Mysql基于事务处理实现转账功能的方法
2015/07/08 PHP
YUI Compressor压缩JavaScript原理及微优化
2013/01/07 Javascript
javascript中的if语句使用介绍
2013/11/20 Javascript
node.js中的querystring.escape方法使用说明
2014/12/10 Javascript
JS中的Replace方法使用经验分享
2015/05/20 Javascript
JS面向对象编程详解
2016/03/06 Javascript
Bootstrap导航条学习使用(一)
2017/02/08 Javascript
AngularJS中$http使用的简单介绍
2017/03/17 Javascript
详解React Native开源时间日期选择器组件(react-native-datetime)
2017/09/13 Javascript
javascript高仿热血传奇游戏实现代码
2018/02/22 Javascript
JavaScript实现左右滚动电影画布
2020/02/06 Javascript
AJAX XMLHttpRequest对象创建使用详解
2020/08/20 Javascript
vuejs实现下拉框菜单选择
2020/10/23 Javascript
python利用hook技术破解https的实例代码
2013/03/25 Python
Python实现豆瓣图片下载的方法
2015/05/25 Python
Python的迭代器和生成器
2015/07/29 Python
Python3实现爬取指定百度贴吧页面并保存页面数据生成本地文档的方法
2018/04/22 Python
python+selenium实现QQ邮箱自动发送功能
2019/01/23 Python
Python Django简单实现session登录注销过程详解
2019/08/06 Python
python基于plotly实现画饼状图代码实例
2019/12/16 Python
python3连接kafka模块pykafka生产者简单封装代码
2019/12/23 Python
Django 拼接两个queryset 或是两个不可以相加的对象实例
2020/03/28 Python
Django与pyecharts结合的实例代码
2020/05/13 Python
django序列化时使用外键的真实值操作
2020/07/15 Python
美国相机和电子产品零售商:Beach Camera
2020/11/26 全球购物
建筑设计所实习生自我鉴定
2013/09/25 职场文书
教师实习自我鉴定
2013/12/18 职场文书
幼儿园中秋节活动方案
2014/02/06 职场文书
2014年助理政工师工作总结
2014/12/19 职场文书
写给同事的离职感言
2015/08/04 职场文书
创业分两种人:那么哪些适合创业?,哪些适合不适合创业呢?
2019/08/23 职场文书
Java Lambda表达式常用的函数式接口
2022/04/07 Java/Android
微信小程序APP的事件绑定以及传递参数时的冒泡和捕获
2022/04/19 Javascript