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教程(3):border-color网页边框色彩
Apr 02 HTML / CSS
一款纯css3实现简单的checkbox复选框和radio单选框
Nov 05 HTML / CSS
结合CSS3的布局新特征谈谈常见布局方法
Jan 22 HTML / CSS
html5/css3响应式页面开发总结
Oct 16 HTML / CSS
HTML5 Canvas像素处理使用接口介绍
Dec 02 HTML / CSS
IE10 Error.stack 让脚本调试更加方便快捷
Apr 22 HTML / CSS
谷歌浏览器小字体处理方案即12px以下字体
Dec 17 HTML / CSS
使用 HTML5 Canvas 制作水波纹效果点击图片就会触发
Sep 15 HTML / CSS
使用html5新特性轻松监听任何App自带返回键的示例
Mar 13 HTML / CSS
data:image data url 文件转为Blob上传后端的方法
Jul 16 HTML / CSS
浅谈amaze-ui中datepicker和datetimepicker注意的几点
Aug 21 HTML / CSS
Html5页面播放M4a音频文件
Mar 30 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 Mysql日期和时间函数集合
2007/11/16 PHP
for循环连续求和、九九乘法表代码
2012/02/20 PHP
PHP各种异常和错误的拦截方法及发生致命错误时进行报警
2016/01/19 PHP
非常有用的9个PHP代码片段
2016/04/06 PHP
php 数组字符串搜索array_search技巧
2016/07/05 PHP
php版微信公众平台实现预约提交后发送email的方法
2016/09/26 PHP
PHP+MySQL实现模糊查询员工信息功能示例
2018/06/01 PHP
PHP各种常见经典算法总结【排序、查找、翻转等】
2019/08/05 PHP
javascript 遍历验证所有文本框的值
2009/08/27 Javascript
Nodejs高扩展性的模板引擎 functmpl简介
2017/02/13 NodeJs
微信小程序使用request网络请求操作实例
2017/12/15 Javascript
细说webpack源码之compile流程-rules参数处理技巧(1)
2017/12/26 Javascript
Vue中v-for的数据分组实例
2018/03/07 Javascript
在ES5与ES6环境下处理函数默认参数的实现方法
2018/05/13 Javascript
layui表格 返回的数据状态异常的解决方法
2019/09/10 Javascript
使用vscode快速建立vue模板过程详解
2019/10/10 Javascript
解决node.js含有%百分号时发送get请求时浏览器地址自动编码的问题
2019/11/20 Javascript
Python实现设置windows桌面壁纸代码分享
2015/03/28 Python
Python实现的最近最少使用算法
2015/07/10 Python
Python面向对象程序设计之继承与多继承用法分析
2018/07/13 Python
使用Python制作自动推送微信消息提醒的备忘录功能
2018/09/06 Python
python爬取微信公众号文章的方法
2019/02/26 Python
Python基于opencv实现的简单画板功能示例
2019/03/04 Python
Django对数据库进行添加与更新的例子
2019/07/12 Python
Python数据可视化:顶级绘图库plotly详解
2019/12/07 Python
python3实现将json对象存入Redis以及数据的导入导出
2020/07/16 Python
详解python安装matplotlib库三种失败情况
2020/07/28 Python
使用py-spy解决scrapy卡死的问题方法
2020/09/29 Python
ghd澳大利亚官方网站:英国最受欢迎的美发工具品牌
2018/05/21 全球购物
化学教师教学反思
2014/01/17 职场文书
水利学院求职自荐书
2014/02/01 职场文书
安全月活动总结
2014/05/05 职场文书
中学生综合素质自我评价
2015/03/06 职场文书
开学随笔
2015/08/15 职场文书
小学2016年“我们的节日·重阳节”活动总结
2016/04/01 职场文书
Jpa Specification如何实现and和or同时使用查询
2021/11/23 Java/Android