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


Posted in HTML / CSS onJanuary 09, 2013

前面的文章我已经讲了3种在canvas中画曲线的方法:arc,arcTo以及quadraticCurveTo.他们都有一个共同点,就是他们画的曲线都只能偏向一边,今天讲的bezierCurveTo与他们最大的不同点就是有两个控制点,即可以画出S形的曲线了。

bezierCurveTo,也就是所谓的贝赛尔曲线了,如果你学过某些画图工具,就能马上理解。
bezierCurveTo的语法如下
ctx.bezierCurveTo(x1,y1,x2,y2,x,y);他的参数我照例解释一下,其中的(x1,y1)即控制点1的坐标,(x2,y2)是控制点2的坐标,(x,y)是他的终点坐标。和quadraticCurveTo一样,他的起点坐标也是由moveTo预先设置好的。

所以,bezierCurveTo画出一条曲线需要4个点:起点,终点,控制点1,控制点2.为了后续讲解,这里我假定控制点1对应起点,控制点2对应终点
这里又要提到canvas画图的老问题了,就是代码画图全部靠猜,画到哪里你要刷新下才能明了。

我还是延续前面的优良传统,画一些辅助线来帮助大家理解:

复制代码
代码如下:

var x1=450, //控制点1的x坐标
y1 = 300, //控制点1的y
x2 = 450, //控制点2的x
y2 = 500,//控制点2的y
x = 300, //终点x
y = 500;//终点y
ctx.moveTo(300,300);//起点
ctx.beginPath();
ctx.lineWidth = 5;
ctx.strokeStyle = "rgba(0,0,0,1)"
ctx.moveTo(300,300);
ctx.bezierCurveTo(x1,y1,x2,y2,x,y);
ctx.stroke();
//开始画辅助线
ctx.beginPath();
ctx.strokeStyle = "rgba(255,0,0,0.5)";
ctx.lineWidth = 1;
// 连接起点和控制点1
ctx.moveTo(300,300);
ctx.lineTo(x1,y1);
// 连接终点和控制点2
ctx.moveTo(x2,y2);
ctx.lineTo(x,y);
// 连接起点与终点(基线)
ctx.moveTo(300,300);
ctx.lineTo(x,y);
ctx.stroke();

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


这里先画了一个类似quadraticCurveTo的曲线,只偏向一边。这条线显得比较“圆润”,是因为控制点1与2的x坐标是相同的。
现在再画一个S形的曲线,证明bezierCurveTo是与众不同的:
复制代码
代码如下:

var x1 = 150;
...

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


其实只要把控制点1的坐标变一下就行了。如果控制点1与控制点2的坐标分别处在基线的两边,则是画出S形的曲线;如果都在基线的某一边,则是类似于quadraticCurveTo的效果。
这个例子的情形比较简单,基线条(起点至终点)是竖直的,但实际应用中大部分时候我们的基线都是斜着的,那情况就复杂多了。不过大家自己试吧

每个画图的方法看起来功能都比较单一,但是,强大的方法是各个单一的方法组合出来的。后续的文章我试着讲解一些常规图形的画法,如圆角矩形,椭圆,他们就需要以前这些单一的方法结合起来。

HTML / CSS 相关文章推荐
css3 box-sizing属性使用参考指南
Jan 08 HTML / CSS
CSS3中的@keyframes关键帧动画的选择器绑定
Jun 13 HTML / CSS
使用CSS3 制作一个material-design 风格登录界面实例
Dec 12 HTML / CSS
CSS3 创建网页动画实现弹跳球动效果
Oct 30 HTML / CSS
HTML5 和小程序实现拍照图片旋转、压缩和上传功能
Oct 08 HTML / CSS
利用HTML5 Canvas API绘制矩形的超级攻略
Mar 21 HTML / CSS
使用phonegap播放音频的实现方法
Mar 31 HTML / CSS
基于HTML5 WebGL的3D机房的示例
Mar 16 HTML / CSS
JavaScript+Canvas实现自定义画板的示例代码
May 13 HTML / CSS
解决HTML5中滚动到底部的事件问题
Aug 22 HTML / CSS
html5 video全屏播放/自动播放的实现示例
Aug 06 HTML / CSS
css实现两栏布局,左侧固定宽,右侧自适应的多种方法
Aug 07 HTML / CSS
html5 Canvas画图教程(7)—canvas里画曲线之quadraticCurveTo方法
Jan 09 #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
You might like
PHP VS ASP
2006/10/09 PHP
PHP ajax 异步执行不等待执行结果的处理方法
2015/05/27 PHP
PHP中的使用curl发送请求(GET请求和POST请求)
2017/02/08 PHP
Some tips of wmi scripting in jscript (1)
2007/04/03 Javascript
Js-$.extend扩展方法使方法参数更灵活
2013/01/15 Javascript
JS随机漂浮广告代码具体实例
2013/11/19 Javascript
jQuery异步验证用户名是否存在示例代码
2014/05/21 Javascript
详解js闭包
2014/09/02 Javascript
z-blog SyntaxHighlighter 长代码无法换行解决办法(jquery)
2014/11/16 Javascript
jQuery+CSS3折叠卡片式下拉列表框实现效果
2015/11/02 Javascript
一道JS前端闭包面试题解析
2015/12/25 Javascript
JavaScript实现简单的tab选项卡切换
2016/01/05 Javascript
快速掌握Node.js事件驱动模型
2016/03/21 Javascript
深入理解Ajax的get和post请求
2016/06/02 Javascript
设置jQueryUI DatePicker默认语言为中文
2016/06/04 Javascript
AngularJS 执行流程详细介绍
2016/08/18 Javascript
js生成随机数方法和实例
2017/01/17 Javascript
Vue封装Swiper实现图片轮播效果
2018/02/06 Javascript
js数据类型检测总结
2018/08/05 Javascript
Vue.directive使用注意(小结)
2018/08/31 Javascript
mpvue+vuex搭建小程序详细教程(完整步骤)
2018/09/30 Javascript
nodejs读取本地中文json文件出现乱码解决方法
2018/10/10 NodeJs
js尾调用优化的实现
2019/05/23 Javascript
JS 实现发送短信验证码的“59秒后重新发送验证短信”功能
2019/08/23 Javascript
详解JavaScript自定义函数
2020/07/29 Javascript
运动检测ViBe算法python实现代码
2018/01/09 Python
Python django框架开发发布会签到系统(web开发)
2020/02/12 Python
详解如何在登录过期后跳出Ifram框架
2020/09/10 HTML / CSS
简历中个人自我评价范文
2013/12/26 职场文书
师范学院美术系毕业生自我鉴定
2014/01/29 职场文书
函授毕业自我鉴定
2014/02/04 职场文书
计算机通信专业推荐信
2014/02/22 职场文书
GMP办公室主任岗位职责
2014/03/14 职场文书
连带责任保证书
2014/04/29 职场文书
2014年平安建设工作总结
2014/11/19 职场文书
感恩主题班会教案
2015/08/12 职场文书