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截图_动力节点Java学院整理
Jul 11 HTML / CSS
纯css3无js实现的Android Logo(有简单动画)
Jan 21 HTML / CSS
纯CSS绘制漂亮的圆形图案效果
May 07 HTML / CSS
CSS3制作炫酷的自定义发光文字
Mar 28 HTML / CSS
css3动画效果小结(推荐)
Jul 25 HTML / CSS
html5嵌入内容_动力节点Java学院整理
Jul 07 HTML / CSS
HTML5 video标签(播放器)学习笔记(一):使用入门
Apr 24 HTML / CSS
html5调用app分享功能示例(WebViewJavascriptBridge)
Mar 21 HTML / CSS
通过canvas转换颜色为RGBA格式及性能问题的解决
Nov 22 HTML / CSS
遮罩层 + Iframe实现界面自动显示的示例代码
Apr 26 HTML / CSS
html5用video标签流式加载的实现
May 20 HTML / CSS
CSS作用域(样式分割)的使用汇总
Nov 07 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
域名查询代码公布
2006/10/09 PHP
php实现webservice实例
2014/11/06 PHP
Yii2 rbac权限控制操作步骤实例教程
2016/04/29 PHP
php apache开启跨域模式过程详解
2019/07/08 PHP
PHP迭代器和生成器用法实例分析
2019/09/28 PHP
JS对URL字符串进行编码/解码分析
2008/10/25 Javascript
Javascript Select操作大集合
2009/05/26 Javascript
推荐10 个很棒的 jQuery 特效代码
2015/10/04 Javascript
jquery验证邮箱格式并显示提交按钮
2015/11/07 Javascript
关于javascript的一些知识以及循环详解
2016/09/12 Javascript
Angular2库初探
2017/03/01 Javascript
详解node Async/Await 更好的异步编程解决方案
2018/05/10 Javascript
vue-router的使用方法及含参数的配置方法
2018/11/13 Javascript
jQuery时间戳和日期相互转换操作示例
2018/12/07 jQuery
微信小程序停止其他视频播放当前视频的实例代码
2019/12/25 Javascript
解决Vue中的生命周期beforeDestory不触发的问题
2020/07/21 Javascript
[00:32]2018DOTA2亚洲邀请赛Secret出场
2018/04/03 DOTA
python删除列表内容
2015/08/04 Python
Python+MongoDB自增键值的简单实现
2016/11/04 Python
python设置值及NaN值处理方法
2018/07/03 Python
pyqt5利用pyqtDesigner实现登录界面
2019/03/28 Python
python 利用jinja2模板生成html代码实例
2019/10/10 Python
Django视图扩展类知识点详解
2019/10/25 Python
完美解决pycharm导入自己写的py文件爆红问题
2020/02/12 Python
python如何利用paramiko执行服务器命令
2020/11/07 Python
深入解析HTML5的IndexedDB索引数据库
2015/09/14 HTML / CSS
Born鞋子官网:Born Shoes
2017/04/06 全球购物
Dillard’s百货官网:Dillards.com
2018/05/26 全球购物
德国综合购物网站:OTTO
2018/11/13 全球购物
英国伦敦的睡衣品牌:Asceno
2019/10/06 全球购物
印度电子产品购物网站:Vijay Sales
2021/02/16 全球购物
大学生毕业求职找工作的自我评价
2013/09/29 职场文书
说谎欺骗人检讨书300字
2014/11/18 职场文书
JS Canvas接口和动画效果大全
2021/04/29 Javascript
Windows7下FTP搭建图文教程
2022/08/05 Servers
js 实现Material UI点击涟漪效果示例
2022/09/23 Javascript