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 相关文章推荐
全面解析CSS Media媒体查询使用操作(推荐)
Aug 15 HTML / CSS
css3个性化字体_动力节点Java学院整理
Jul 12 HTML / CSS
可以随进度显示不同颜色的css3进度条分享
Apr 11 HTML / CSS
老生常谈CSS中的长度单位
Jun 27 HTML / CSS
Css3新特性应用之形状总结
Dec 08 HTML / CSS
css3实现可拖动的魔方3d效果
May 07 HTML / CSS
CSS3 毛玻璃效果
Aug 14 HTML / CSS
HTML5中通过li-canvas轻松实现单图、多图、圆角图绘制,单行文字、多行文字等
Nov 30 HTML / CSS
html5触摸事件判断滑动方向的实现
Jun 05 HTML / CSS
html特殊符号示例 html特殊字符编码对照表
Jan 14 HTML / CSS
iframe与window.onload如何使用详解
May 07 HTML / CSS
HTML5+CSS设置浮动却没有动反而在中间且错行的问题
May 26 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
德生PL330测评
2021/03/02 无线电
Yii2实现ajax上传图片插件用法
2016/04/28 PHP
PHPExcel在linux环境下导出报500错误的解决方法
2017/01/26 PHP
extjs 为某个事件设置拦截器
2010/01/15 Javascript
Extjs中的GridPanel隐藏列会显示在menuDisabled中解决方法
2013/01/27 Javascript
JavaScript 实现简单的倒计时弹窗DEMO附图
2014/03/05 Javascript
javascript内置对象arguments详解
2014/03/16 Javascript
jQuery插件pagination实现分页特效
2015/04/12 Javascript
JavaScript中函数表达式和函数声明及函数声明与函数表达式的不同
2015/11/15 Javascript
JS禁用页面上所有控件的实现方法(附demo源码下载)
2015/12/17 Javascript
JavaScript操作表单实例讲解(上)
2016/06/20 Javascript
基于jQuery实现发送短信验证码后的倒计时功能(无视页面关闭)
2016/09/02 Javascript
Javascript中判断一个值是否为undefined的方法详解
2016/09/28 Javascript
用director.js实现前端路由使用实例
2017/01/27 Javascript
vue.js 上传图片实例代码
2017/06/22 Javascript
关于JavaScript中的this指向问题总结篇
2017/07/23 Javascript
JavaScript实现音乐自动切换和轮播
2017/11/05 Javascript
jQuery 选择器用法基础入门示例
2020/01/04 jQuery
微信小程序仿通讯录功能
2020/04/09 Javascript
python聊天程序实例代码分享
2013/11/18 Python
详解python 字符串和日期之间转换 StringAndDate
2017/05/04 Python
Python使用Flask-SQLAlchemy连接数据库操作示例
2018/08/31 Python
Python3实现爬虫爬取赶集网列表功能【基于request和BeautifulSoup模块】
2018/12/05 Python
python3.7 使用pymssql往sqlserver插入数据的方法
2019/07/08 Python
Python小程序 控制鼠标循环点击代码实例
2019/10/08 Python
python 实现二维字典的键值合并等函数
2019/12/06 Python
浅析python表达式4+0.5值的数据类型
2020/02/26 Python
Python按照list dict key进行排序过程解析
2020/04/04 Python
python中Ansible模块的Playbook的具体使用
2020/05/28 Python
专门经营化妆刷的美国彩妆品牌:Sigma Beauty
2017/09/11 全球购物
Ajax和javascript的区别
2013/07/20 面试题
军训自我鉴定怎么写
2014/02/13 职场文书
农业局学习党的群众路线教育实践活动心得体会
2014/03/07 职场文书
离婚协议书怎么写(范本参考)
2014/09/30 职场文书
公司离职证明标准范本
2014/10/05 职场文书
MySQL数据库如何使用Shell进行连接
2022/04/12 MySQL