HTML5 Canvas中使用用路径描画圆弧


Posted in HTML / CSS onJanuary 01, 2015

本文翻译自Steve Fulton & Jeff Fulton HTML5 Canvas, Chapter 2, “Advanced Path Methods, Arcs”

在Canvas绘图中,“圆弧”既可以是一个整圆,也可以是圆周的一部分。

复制代码
代码如下:

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

在上述方法描述中,x和y定义圆心,radius定义圆周的半径。startAngle和endAngle以极坐标值表示。anticlockwise(布尔值)定义圆弧的方向。

比如,如果我们想描画一个以点(100, 100)为圆心,半径为20的圆周,我们可以使用以下代码:

复制代码
代码如下:

context.arc(100, 100, 20, (Math.PI/180)*0, (Math.PI/180)*360, false);

执行效果为:

HTML5 Canvas中使用用路径描画圆弧

值得注意的是,在上述代码中,我们需要将起始角度(0)和结束角度(360)通过乘以(Math.PI/180)来转换成极坐标弧度。当起始角度为0而结束角度为360时,得到的是一个整圆。

除了整圆,我们也可以描画圆弧片段。下述代码描画了四分之一个圆周:

复制代码
代码如下:

context.arc(100, 100, 20, (Math.PI/180)*0, (Math.PI/180)*90, false);

HTML5 Canvas中使用用路径描画圆弧

如果我们想描画除上述圆弧之外的另外四分之三个圆周,我们可以将anticlockwise设置为true:

复制代码
代码如下:

context.arc(100, 100, 20, (Math.PI/180)*0, (Math.PI/180)*90, true);

HTML5 Canvas中使用用路径描画圆弧

译注1:在Canvas的坐标系中,Y轴的方向是向下的。

译注2:使用context.arcTo()方法也可以描画圆弧。Steve Fulton & Jeff Fulton 的 HTML5 Canvas 原著中对该方法的描述是完全错误的。正确的arcTo()总结详见:曲线之arcTo。

HTML / CSS 相关文章推荐
CSS3中的5个有趣的新技术
Apr 02 HTML / CSS
CSS实现的一闪而过的图片闪光效果
Apr 23 HTML / CSS
CSS3中HSL和HSLA的简单使用示例
Jul 14 HTML / CSS
使用CSS3设计地图上的雷达定位提示效果
Apr 05 HTML / CSS
解决CSS3的opacity属性带来的层叠顺序问题
May 09 HTML / CSS
详解CSS3媒体查询响应式布局bootstrap 框架原理实战(推荐)
Nov 16 HTML / CSS
html5利用canvas绘画二级树形结构图的示例
Sep 27 HTML / CSS
HTML5 window/iframe跨域传递消息 API介绍
Aug 26 HTML / CSS
html5通过canvas实现刮刮卡效果示例分享
Jan 27 HTML / CSS
HTML5 Web缓存和运用程序缓存(cookie,session)
Jan 11 HTML / CSS
详解canvas绘制多张图的排列顺序问题
Jan 21 HTML / CSS
HTML5 Canvas实现放大镜效果示例
Mar 25 HTML / CSS
HTML5 Canvas中使用路径描画二阶、三阶贝塞尔曲线
Jan 01 #HTML / CSS
HTML5制作酷炫音频播放器插件图文教程
Dec 30 #HTML / CSS
html5实现完美兼容各大浏览器的播放器
Dec 26 #HTML / CSS
html5中 media(播放器)的api使用指南
Dec 26 #HTML / CSS
浅谈html5 响应式布局
Dec 24 #HTML / CSS
HTML5进度条特效
Dec 18 #HTML / CSS
html5+svg学习指南之SVG基础知识
Dec 17 #HTML / CSS
You might like
php使用unset()删除数组中某个单元(键)的方法
2015/02/17 PHP
PHP关于foreach复制知识点总结
2019/01/28 PHP
Laravel框架自定义验证过程实例分析
2019/02/01 PHP
JavaScript 学习笔记(十三)Dom创建表格
2010/01/21 Javascript
JSON传递bool类型数据的处理方式介绍
2013/09/18 Javascript
JavaScript简单实现网页回到顶部功能
2013/11/12 Javascript
angularjs指令中的compile与link函数详解
2014/12/06 Javascript
js实现文本框选中的方法
2015/05/26 Javascript
分享javascript计算时间差的示例代码
2020/03/19 Javascript
jQuery包裹节点用法完整示例
2016/09/13 Javascript
浅析Javascript的自动分号插入(ASI)机制
2016/09/29 Javascript
JS+HTML5实现的前端购物车功能插件实例【附demo源码下载】
2016/10/17 Javascript
Vue 页面状态保持页面间数据传输的一种方法(推荐)
2018/11/01 Javascript
JS实现继承的几种常用方式示例
2019/06/22 Javascript
微信小程序实现购物车代码实例详解
2019/08/29 Javascript
[41:17]完美世界DOTA2联赛PWL S3 access vs CPG 第二场 12.13
2020/12/17 DOTA
Python多线程编程(四):使用Lock互斥锁
2015/04/05 Python
栈和队列数据结构的基本概念及其相关的Python实现
2015/08/24 Python
利用python操作SQLite数据库及文件操作详解
2017/09/22 Python
Python 获得13位unix时间戳的方法
2017/10/20 Python
Python读取txt文件数据的方法(用于接口自动化参数化数据)
2018/06/27 Python
python 将有序数组转换为二叉树的方法
2019/03/26 Python
python 有效的括号的实现代码示例
2019/11/11 Python
Python while循环使用else语句代码实例
2020/02/07 Python
升级keras解决load_weights()中的未定义skip_mismatch关键字问题
2020/06/12 Python
Python 连接 MySQL 的几种方法
2020/09/09 Python
SheIn沙特阿拉伯:女装在线
2020/03/23 全球购物
Aurora London官网:奢华、负担得起的皮革手袋
2020/08/01 全球购物
Vans(范斯)新西兰官方网站:美国原创极限运动品牌
2020/09/19 全球购物
C++是不是类型安全的
2014/02/18 面试题
一个SQL面试题
2014/08/21 面试题
英语翻译系毕业生求职信
2013/09/29 职场文书
2015年社区统计工作总结
2015/04/21 职场文书
2016年公共机构节能宣传周活动总结
2016/04/05 职场文书
2019 入党申请书范文
2019/07/10 职场文书
python数字图像处理:图像的绘制
2022/06/28 Python