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背景图片透明叠加属性cross-fade简介及用法实例
Jan 08 HTML / CSS
css3设置box-pack和box-align让div里面的元素垂直居中
Sep 01 HTML / CSS
一款恶搞头像特效的制作过程 利用css3和jquery
Nov 21 HTML / CSS
HTML5中微数据概述及在搜索引擎中的使用举例
Feb 07 HTML / CSS
HTML5 Canvas鼠标与键盘事件demo示例
Jul 04 HTML / CSS
HTML5 input元素类型:email及url介绍
Aug 13 HTML / CSS
Canvas globalCompositeOperation
Dec 18 HTML / CSS
五分钟学会HTML5的WebSocket协议
Nov 22 HTML / CSS
AmazeUI的下载配置与Helloworld的实现
Aug 19 HTML / CSS
CSS实现fullpage.js全屏滚动效果的示例代码
Mar 24 HTML / CSS
CSS3点击按钮圆形进度打钩效果的实现代码
Mar 30 HTML / CSS
postman中form-data、x-www-form-urlencoded、raw、binary的区别介绍
Jan 18 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写的采集程序
2007/03/16 PHP
phpMyadmin 用户权限中英对照
2010/04/02 PHP
php单态设计模式(单例模式)实例
2014/11/18 PHP
PHP模拟登陆163邮箱发邮件及获取通讯录列表的方法
2015/03/07 PHP
PHP面向对象之领域模型+数据映射器实例(分析)
2017/06/21 PHP
JQuery Study Notes 学习笔记(一)
2010/08/04 Javascript
javascript学习笔记(十二) RegExp类型介绍
2012/06/20 Javascript
js indexOf()定义和用法
2012/10/21 Javascript
滚动图片效果 jquery实现回旋滚动效果
2013/01/08 Javascript
jquery 实现input输入什么div图层显示什么
2014/06/15 Javascript
JQuery中的事件及动画用法实例
2015/01/26 Javascript
js实现图片淡入淡出切换简易效果
2016/08/22 Javascript
Angular.js跨controller实现参数传递的两种方法
2017/02/20 Javascript
微信小程序图片宽100%显示并且不变形
2017/06/21 Javascript
详解vue模拟加载更多功能(数据追加)
2017/06/23 Javascript
详解从Vue.js源码看异步更新DOM策略及nextTick
2017/10/11 Javascript
微信小程序使用swiper组件实现类3D轮播图
2018/08/29 Javascript
Python3通过Luhn算法快速验证信用卡卡号的方法
2015/05/14 Python
python中reload(module)的用法示例详解
2017/09/15 Python
python爬虫 正则表达式使用技巧及爬取个人博客的实例讲解
2017/10/20 Python
Python中装饰器高级用法详解
2017/12/25 Python
设置python3为默认python的方法
2018/10/31 Python
Python中logging.NullHandler 的使用教程
2018/11/29 Python
python opencv 简单阈值算法的实现
2019/08/04 Python
Python实现PyPDF2处理PDF文件的方法示例
2019/09/25 Python
Python如何基于rsa模块实现非对称加密与解密
2020/01/03 Python
pyqt5数据库使用详细教程(打包解决方案)
2020/03/25 Python
Python字典fromkeys()方法使用代码实例
2020/07/20 Python
与UNIX有关的几个名词
2015/09/17 面试题
学习雷锋倡议书
2014/04/15 职场文书
2014年纪检工作总结
2014/11/12 职场文书
大学生英文求职信范文
2015/03/19 职场文书
导游词之云南-元阳梯田
2019/10/08 职场文书
Golang表示枚举类型的详细讲解
2021/09/04 Golang
Spring Boot DevTools 全局配置学习指南
2022/03/31 Java/Android
Vue2项目中对百度地图的封装使用详解
2022/06/16 Vue.js