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折叠效果(3D效果)整理
Dec 30 HTML / CSS
一款纯css3实现的鼠标悬停动画按钮
Dec 29 HTML / CSS
利用CSS3动画实现圆圈由小变大向外扩散的效果实例
Sep 10 HTML / CSS
前端canvas水印快速制作(附完整代码)
Sep 19 HTML / CSS
HTML5离线缓存在tomcat下部署可实现图片flash等离线浏览
Dec 13 HTML / CSS
HTML5中微数据概述及在搜索引擎中的使用举例
Feb 07 HTML / CSS
仿酷狗html5手机音乐播放器主要部分代码
May 15 HTML / CSS
解析HTML5的存储功能和web SQL的相关操作方法
Feb 19 HTML / CSS
如何利用input事件来监听移动端的输入
Apr 15 HTML / CSS
canvas离屏技术与放大镜实现代码示例
Aug 31 HTML / CSS
HTML5拖放API实现自动生成相框功能
Apr 07 HTML / CSS
css animation配合SVG制作能量流动效果
Mar 24 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
把77A收信机改造成收音机
2021/03/02 无线电
php 将字符串按大写字母分隔成字符串数组
2010/04/30 PHP
destoon后台网站设置变成空白的解决方法
2014/06/21 PHP
PHP使用get_headers函数判断远程文件是否存在的方法
2014/11/28 PHP
php简单socket服务器客户端代码实例
2015/05/18 PHP
yii2中结合gridview如何使用modal弹窗实例代码详解
2016/06/12 PHP
通过jQuery源码学习javascript(一)
2012/12/27 Javascript
javascript检测对象中是否存在某个属性判断方法小结
2013/05/19 Javascript
JS+CSS实现带有碰撞缓冲效果的竖向导航条代码
2015/09/15 Javascript
解决js函数闭包内存泄露问题的办法
2016/01/25 Javascript
jQuery实现HTML表格单元格的合并功能
2016/04/06 Javascript
JavaScript基于自定义函数判断变量类型的实现方法
2016/11/23 Javascript
Angular.Js中ng-include指令的使用与实现
2017/05/07 Javascript
Vuex的初探与实战小结
2018/11/26 Javascript
JavaScript函数的4种调用方法实例分析
2019/03/05 Javascript
微信小程序基础教程之worker线程的使用方法
2019/07/15 Javascript
Vue的click事件防抖和节流处理详解
2019/11/13 Javascript
Python中encode()方法的使用简介
2015/05/18 Python
python使用reportlab实现图片转换成pdf的方法
2015/05/22 Python
python使用psutil模块获取系统状态
2016/08/27 Python
基于Python Numpy的数组array和矩阵matrix详解
2018/04/04 Python
解决python打不开文件(文件不存在)的问题
2019/02/18 Python
python识别图像并提取文字的实现方法
2019/06/28 Python
Python中的几种矩阵乘法(小结)
2019/07/10 Python
小 200 行 Python 代码制作一个换脸程序
2020/05/12 Python
Python工程师必考的6个经典面试题
2020/06/28 Python
Ted Baker英国官网:男士和女士服装及配件
2017/03/13 全球购物
Tommy Hilfiger美国官网:美国高端休闲领导品牌
2019/01/14 全球购物
PHP中如何使用Cookie
2015/10/28 面试题
会计电算化专业毕业生自荐信
2013/12/20 职场文书
高一学生评语大全
2014/04/25 职场文书
学习方法演讲稿
2014/05/10 职场文书
实习协议书范本
2014/09/25 职场文书
上诉状格式
2015/05/23 职场文书
2015大学生暑期实习报告
2015/07/13 职场文书
CSS3 制作的悬停缩放特效
2021/04/13 HTML / CSS