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中用animation的steps属性制作帧动画
Apr 25 HTML / CSS
CSS3转换功能transform主要属性值分析及实现分享
May 06 HTML / CSS
CSS3系列教程:背景图片(背景大小和多背景图) 应用说明
Dec 19 HTML / CSS
利用CSS3的线性渐变linear-gradient制作边框的示例
Jun 02 HTML / CSS
CSS3标注引用的出处和来源的方法
Feb 25 HTML / CSS
CSS3中animation实现流光按钮效果
Dec 21 HTML / CSS
html5 canvas实现跟随鼠标旋转的箭头
Mar 11 HTML / CSS
HTML5等待加载动画效果
Jul 27 HTML / CSS
详解HTML5中表单验证的8种方法介绍
Dec 19 HTML / CSS
利用三角函数在canvas上画虚线的方法
Jan 11 HTML / CSS
微信html5页面调用第三方位置导航的示例
Mar 14 HTML / CSS
html5借用repeating-linear-gradient实现一把刻度尺(ruler)
Sep 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
几个解决兼容IE6\7\8不支持html5标签的几个方法
Jan 07 #HTML / CSS
html5 canvas-2.用canvas制作一个猜字母的小游戏
Jan 07 #HTML / CSS
You might like
php UBB 解析实现代码
2011/11/27 PHP
手把手教你打印出PDF(关于fpdf的简单应用)
2013/06/25 PHP
php中常见的sql攻击正则表达式汇总
2014/11/06 PHP
php常用字符函数实例小结
2016/12/29 PHP
PHP 7.1中AES加解密方法mcrypt_module_open()的替换方案
2017/10/17 PHP
JS获取后台Cookies值的小例子
2013/03/04 Javascript
js setTimeout opener的用法示例详解
2013/10/23 Javascript
javascript中call,apply,bind的用法对比分析
2015/02/12 Javascript
javascript无刷新评论实现方法
2015/05/13 Javascript
vue监听键盘事件的快捷方法【推荐】
2018/07/11 Javascript
如何解决React官方脚手架不支持Less的问题(小结)
2018/09/12 Javascript
angular6 填坑之sdk的方法
2018/12/27 Javascript
微信小程序地图(map)组件点击(tap)获取经纬度的方法
2019/01/10 Javascript
JavaScript面向对象编程小游戏---贪吃蛇代码实例
2019/05/15 Javascript
python中__call__方法示例分析
2014/10/11 Python
使用python3.5仿微软记事本notepad
2016/06/15 Python
用python与文件进行交互的方法
2018/03/01 Python
对numpy中shape的深入理解
2018/06/15 Python
Python OpenCV处理图像之图像直方图和反向投影
2018/07/10 Python
使用python对文件中的数值进行累加的实例
2018/11/28 Python
Pytorch中accuracy和loss的计算知识点总结
2019/09/10 Python
Python使用QQ邮箱发送邮件报错smtplib.SMTPAuthenticationError
2019/12/20 Python
python支持多线程的爬虫实例
2019/12/21 Python
Django返回HTML文件的实现方法
2020/09/17 Python
Python3.9最新版下载与安装图文教程详解(Windows系统为例)
2020/11/28 Python
CSS3线性渐变简单实现以及该属性在浏览器中的不同
2012/12/12 HTML / CSS
阿迪达斯意大利在线商店:adidas意大利
2016/09/19 全球购物
巴西购物网站:Estrela10
2018/12/13 全球购物
自主招生自荐书
2013/11/29 职场文书
行政人员工作职责
2013/12/05 职场文书
单位办理社保介绍信
2014/01/10 职场文书
先进党支部申报材料
2014/12/24 职场文书
python爬取企查查企业信息之selenium自动模拟登录企查查
2021/04/08 Python
Kubernetes部署实例并配置Deployment、网络映射、副本集
2022/04/01 Servers
漫画《催眠麦克风-Dawn Of Divisions》第二卷PV公开
2022/04/05 日漫
分析MySQL优化 index merge 后引起的死锁
2022/04/19 MySQL