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 相关文章推荐
8款使用 CSS3 实现超炫的 Loading(加载)的动画效果
Mar 17 HTML / CSS
使用CSS3美化HTML表单的技巧演示
May 17 HTML / CSS
10种CSS3实现的loading动画,挑一个走吧?
Nov 16 HTML / CSS
html5嵌入内容_动力节点Java学院整理
Jul 07 HTML / CSS
HTML5 Canvas中使用路径描画二阶、三阶贝塞尔曲线
Jan 01 HTML / CSS
教你使用Canvas处理图片的方法
Nov 28 HTML / CSS
快速创建 HTML5 Canvas 电信网络拓扑图的示例代码
Mar 21 HTML / CSS
canvas 如何绘制线段的实现方法
Jul 12 HTML / CSS
使用canvas来完成线性渐变和径向渐变的功能的方法示例
Jul 25 HTML / CSS
canvas实现图片镜像翻转的2种方式
Jul 22 HTML / CSS
HTML5超文本标记语言的实现方法
Sep 24 HTML / CSS
CSS实现鼠标悬浮动画特效
May 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 Pear 安装及使用
2009/03/19 PHP
php 字符转义 注意事项
2009/05/27 PHP
jQuery EasyUI API 中文文档 - DateBox日期框
2011/10/15 PHP
javascript与CSS复习(二)
2010/06/29 Javascript
基于jquery的$.ajax async使用
2011/10/19 Javascript
JS对文本框值的判断示例
2014/03/10 Javascript
Javascript实现多彩雪花从天降散落效果的方法
2015/02/02 Javascript
javascript异步处理工作机制详解
2015/04/13 Javascript
详解 javascript中offsetleft属性的用法
2015/11/11 Javascript
javascript的BOM
2016/05/03 Javascript
JS模态窗口返回值兼容问题的完美解决方法
2016/05/28 Javascript
微信小程序 获取二维码实例详解
2017/06/23 Javascript
JS中LocalStorage与SessionStorage五种循序渐进的使用方法
2017/07/12 Javascript
解决vue this.$forceUpdate() 处理页面刷新问题(v-for循环值刷新等)
2018/07/26 Javascript
vue.js 实现点击按钮动态添加li的方法
2018/09/07 Javascript
微信小程序发布新版本时自动提示用户更新的方法
2019/06/07 Javascript
教你搭建按需加载的Vue组件库(小结)
2019/07/29 Javascript
js中的面向对象之对象常见创建方法详解
2019/12/16 Javascript
vue data对象重新赋值无效(未更改)的解决方式
2020/07/24 Javascript
JS+CSS实现过渡特效
2021/01/02 Javascript
Python实现的个人所得税计算器示例
2018/06/01 Python
python实现猜数字游戏
2020/03/25 Python
Python jieba库用法及实例解析
2019/11/04 Python
pycharm修改file type方式
2019/11/19 Python
pytorch中nn.Conv1d的用法详解
2019/12/31 Python
Python Tornado核心及相关原理详解
2020/06/24 Python
python反编译教程之2048小游戏实例
2021/03/03 Python
html svg生成环形进度条的实现方法
2019/09/23 HTML / CSS
Carolina工作鞋官网:Carolina Footwear
2019/03/14 全球购物
综合测评自我鉴定
2013/10/08 职场文书
幼儿园小班教学反思
2014/02/02 职场文书
财务部经理岗位职责
2014/02/03 职场文书
餐厅周年庆活动方案
2014/08/25 职场文书
dubbo集成zipkin获取Traceid的实现
2021/07/26 Java/Android
SQL Server实现分页方法介绍
2022/03/16 SQL Server
CSS中float高度塌陷问题的四种解决方案
2022/04/18 HTML / CSS