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


Posted in HTML / CSS onJanuary 09, 2013

在canvas画线条这篇文章中,我讲了画直线的方法,按理这篇画曲线的文章早该发了,但由于canvas画曲线比较特殊,我还没摸透,所以要一步步尝试。
canvas里画曲线的难点之一,就在于他连曲线的函数就有4个!分别是arc,arcTo,quadraticCurveTo,bezierCurveTo.我从最简单的arc方法讲起吧。
arc的作用是画一个正规的圆弧,可以是一个完整的圆,也可以是一个圆的某一段弧线。

arc的语法如下

复制代码
代码如下:

context.arc(x, y, radius, startAngle, endAngle, anticlockwise)

他的参数我解释一下,即
arc(圆心x,圆心y,半径,开始的角度,结束的角度,是否逆时针)
如果我们用arc画一个完整的圆,该怎么搞?大家注意到参数中有个开始角度与结束角度,如果我们开始角度是0,结束角度是360,不就是个正圆了?
正解!但要注意的是,这里的角度是用“弧度”来表示的(Flash也是如此),一个完整的圆即360度,就是2PI弧度。

所以我们这么写

复制代码
代码如下:

ctx.arc(400,400,20,0,Math.PI*2);
ctx.fill();
ctx.stroke();

和lineTo一样,arc也是画的路径,所以我们要在他后面调用填充或描边的方法才能显出图形(图中采用了红色的strokeStyle与半透明红色的fillStyle)。

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


现在我们来画一个1/4圆,角度嘛,就是90度。前面说了,360度角即2PI弧度,那么一度角就是2PI/360=PI/180弧度,那么90度就是2PI/360*90=PI/2弧度(其他的角度请自行计算)。
复制代码
代码如下:

ctx.arc(400,400,20,0,Math.PI*2/4);

html5 Canvas画图教程(5)—canvas里画曲线之arc方法
 
由图我们可以确定arc的0度就是数学上常用的0度,但是角度默认是顺时针张开的,与数学模型相反(跟坐标有关,因为canvas坐标也与数学坐标相反)。
不过前面不是有个参数是确定是否逆时针吗?我们把他设为true如何?
复制代码
代码如下:

ctx.arc(400,400,20,0,Math.PI*2/4,true);

html5 Canvas画图教程(5)—canvas里画曲线之arc方法
 
你会看到,角度变成了逆时针展开,导致弧线变成了360-90=270度。
但是!大家要注意一点,就是起点与终点的计算方式,始终是以0度为起点,并顺时针延伸的,不存在顺反的说法。顺反时针只是弧线的绘制方向。
这样不仅仅可以防止顺来逆去的容易混淆,而且更方便计算。
不过,灵活的使用逆时针,有时候很有用。
上面的例子,我们的起点角度都是0,现在我们试试其他的起点角度吧,比如90度。
复制代码
代码如下:

ctx.arc(400,400,20,Math.PI*2/4,Math.PI*2+Math.PI);

如果我们起点是90度而终点也是90度,那结果就是什么都不得画,所以我把终点角度改成了180度,最后得到下图的图形。

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

问题:如果我们从非0度起点来画一个完整的圆,行不行?当然也可以,只要你把弧线的终点设置为360度+起点角度,如:
复制代码
代码如下:

ctx.arc(400,400,20,Math.PI*2/4,Math.PI*2+Math.PI*2/4); //起点90度,终点360+90度

不过这种做法纯属没事找事,正常人是不会用的。
总结:Canvas的arc方法是画正圆弧线的办法,也只能画正弧线,没法画其他奇怪的弧线,比如S形——虽然我最喜欢S形了。
HTML / CSS 相关文章推荐
纯CSS3制作的简洁蓝白风格的登录模板(非IE效果更好)
Aug 11 HTML / CSS
css3高级选择器使用方法
Dec 02 HTML / CSS
css3实现超炫风车特效
Nov 12 HTML / CSS
CSS3 实现footer 固定在底部(无论页面多高始终在底部)
Oct 15 HTML / CSS
HTML5应用之文件上传
Dec 30 HTML / CSS
利用html5 file api读取本地文件示例(如图片、PDF等)
Mar 07 HTML / CSS
使用html2canvas将页面转成图并使用用canvas2image下载
Apr 04 HTML / CSS
如何避免常见的6种HTML5错误用法
Nov 06 HTML / CSS
localStorage、sessionStorage使用总结
Nov 17 HTML / CSS
关于HTML编码导致的乱码问题
Sep 04 HTML / CSS
CSS SandBox应用场景及常见问题
Jun 25 HTML / CSS
微信小程序纯CSS实现无限弹幕滚动效果
Sep 23 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
几个解决兼容IE6\7\8不支持html5标签的几个方法
Jan 07 #HTML / CSS
html5 canvas-2.用canvas制作一个猜字母的小游戏
Jan 07 #HTML / CSS
You might like
Base64在线编码解码实现代码 演示与下载
2011/01/08 PHP
PHP中file_exists与is_file,is_dir的区别介绍
2012/09/12 PHP
解析如何修改phpmyadmin中的默认登陆超时时间
2013/06/25 PHP
php利用递归实现删除文件目录的方法
2016/09/23 PHP
Smarty3配置及入门语法
2017/02/22 PHP
利用PHP访问MySql数据库的逻辑操作以及增删改查的实例讲解
2017/08/30 PHP
extjs 学习笔记(二) Ext.Element类
2009/10/13 Javascript
javascript 构建一个xmlhttp对象池合理创建和使用xmlhttp对象
2010/01/15 Javascript
firefox事件处理之自动查找event的函数(用于onclick=foo())
2010/08/05 Javascript
apycom出品的jQuery精美菜单破解方法
2011/02/18 Javascript
js实现浏览器的各种菜单命令比如打印、查看源文件等等
2013/10/24 Javascript
JQuery遍历DOM节点的方法
2015/06/11 Javascript
javascript基础知识分享之类与函数化
2016/02/13 Javascript
jQuery+CSS3实现点赞功能
2017/03/13 Javascript
详解react-webpack2-热模块替换[HMR]
2017/08/03 Javascript
node文字生成图片的示例代码
2017/10/26 Javascript
详解操作虚拟dom模拟react视图渲染
2018/07/25 Javascript
微信小程序首页的分类功能和搜索功能的实现思路及代码详解
2018/09/11 Javascript
vue 右键菜单插件 简单、可扩展、样式自定义的右键菜单
2018/11/29 Javascript
深入理解Node内建模块和对象
2019/03/12 Javascript
在Vue项目中使用jsencrypt.js对数据进行加密传输的方法
2019/04/17 Javascript
ES6数组与对象的解构赋值详解
2019/06/14 Javascript
layui问题之自动滚动二级iframe页面到指定位置的方法
2019/09/18 Javascript
Nodejs文件上传、监听上传进度的代码
2020/03/27 NodeJs
Python编程之string相关操作实例详解
2017/07/22 Python
用Python删除本地目录下某一时间点之前创建的所有文件的实例
2017/12/14 Python
Python实现的基于优先等级分配糖果问题算法示例
2018/04/25 Python
python实现全盘扫描搜索功能的方法
2019/02/14 Python
Python利用逻辑回归分类实现模板
2020/02/15 Python
一款利用纯css3实现的win8加载动画的实例分析
2014/12/11 HTML / CSS
美国排名第一的泳池用品直接来源:In The Swim
2019/09/23 全球购物
请描述一下”is a”关系和”has a”关系
2015/02/03 面试题
CLR与IL分别是什么含义
2016/08/23 面试题
国际贸易专业个人求职信范文分享
2013/12/14 职场文书
《白鹅》教学反思
2014/04/13 职场文书
Python+Appium新手教程
2021/04/17 Python