canvas arcTo()用法详解
CanvasRenderingContext2D对象的方法arcTo()的用法。
arcTo(x1, y1, x2, y2, radius)
arcTo()
方法将利用当前端点、端点1(x1,y1)
和端点2(x2,y2)
这三个点所形成的夹角,然后绘制一段与夹角的两边相切并且半径为radius
的圆上的弧线。
弧线的起点就是当前端点所在边与圆的切点,弧线的终点就是端点2(x2,y2)
所在边与圆的切点,并且绘制的弧线是两个切点之间长度最短的那个圆弧。
此外,如果当前端点不是弧线起点,arcTo()
方法还将添加一条当前端点到弧线起点的直线线段。
上述字面解释可能不易理解,我们最好结合实际的代码示例来帮助理解,请先参考下面的代码:
//获取Canvas对象(画布)
var canvas = document.getElementById("myCanvas");
//简单地检测当前浏览器是否支持Canvas对象,以免在一些不支持html5的浏览器中提示语法错误
if(canvas.getContext){
//获取对应的CanvasRenderingContext2D对象(画笔)
var ctx = canvas.getContext("2d"); //指定绘制路径的起始点
ctx.moveTo(50, 50);
//绘制一条到坐标(150,50)的水平直线
ctx.lineTo(150, 50); //坐标点(150,50)就是绘制弧线时的当前端点 //端点1
var p1 = {
x : 200,
y : 50
};
//端点2
var p2 = {
x : 200,
y : 100
};
//绘制与当前端点、端点1、端点2三个点所形成的夹角的两边相切并且半径为50px的圆的一段弧线
ctx.arcTo(p1.x, p1.y, p2.x, p2.y, 50); //设置线条颜色为蓝色
ctx.strokeStyle = "blue";
//按照上述绘制路径绘制弧线
ctx.stroke();
}
使用canvas arcTo()绘制的弧线
如上图所示,由于在使用arcTo()
绘制弧线时,「画笔」所在的端点为(150,50)
,所以坐标点(150,50)
就是当前端点,接着我们在arcTo()
方法的参数中指定了端点1(200,50)
和端点2(200,100)
,因此arcTo()
将绘制出与这三个端点所形成的夹角的两边相切、并且半径为50px的圆上的一段弧线。
此外,夹角两边与圆相切的两个切点,将圆分成了两段圆弧,一段就是上图绘制出来的1/4圆弧,一段则是剩下的3/4圆弧,由于arcTo()
将会沿着最短圆弧的方向绘制弧线,所以绘制出来的弧线就是较短的1/4圆弧。
在上面的示例中,由于我们设定的这三个端点比较特殊,当前端点和端点2实际上就是弧线所在圆与对应的夹角两边相切的切点。也就是说,当前端点就在弧线所在的圆上,并且是所绘制的圆弧的起点。现在,我们再来看看当前端点不是弧线起点的情况:
//获取Canvas对象(画布)
var canvas = document.getElementById("myCanvas");
//简单地检测当前浏览器是否支持Canvas对象,以免在一些不支持html5的浏览器中提示语法错误
if(canvas.getContext){
//获取对应的CanvasRenderingContext2D对象(画笔)
var ctx = canvas.getContext("2d"); //指定绘制路径的起始点
ctx.moveTo(50, 50);
//注释掉lineTo(),不再先绘制直线
//ctx.lineTo(150, 50); //此时,坐标点(50,50)就是绘制弧线时的当前端点 //端点1
var p1 = {
x : 200,
y : 50
};
//端点2
var p2 = {
x : 200,
y : 100
};
//绘制与当前端点、端点1、端点2三个点所形成的夹角的两边相切并且半径为50px的圆的一段弧线
ctx.arcTo(p1.x, p1.y, p2.x, p2.y, 50); //设置线条颜色为蓝色
ctx.strokeStyle = "blue";
//按照上述绘制路径绘制弧线
ctx.stroke();
}
对应的显示效果如下图:
通过观察上面的显示效果你会发现,这和我们第1个代码示例的显示效果完全一致。
在此处的示例代码中,我们并没有先绘制一条直线,但是,在绘制弧线时,这里的起始点(50,50)
就是当前端点,所以arcTo()
将会利用起始点(50,50)
、端点1(200,50)
、端点2(200,100)
所形成的夹角,然后绘制一段与夹角两边相切的圆弧。由于起始点(50,50)
和端点1(200,50)
所在的直线与第1个例子中当前端点(150,50)
和端点1(200,50)
所在的直线实际上是同一条直线,所以绘制出来的圆弧依然相同。不同的是,此时的当前端点并不是圆弧的起点,arcTo()
就会自动添加一条当前端点到圆弧起点的直线。于是,我们就看到了与第1个实例代码完全相同的图形效果。
原文http://www.365mini.com/page/html5-canvas-arcto.htm
canvas arcTo()用法详解的更多相关文章
- canvas arcTo()用法详解 – CodePlayer
canvas arcTo()用法详解 – CodePlayer canvas arcTo()用法详解
- Android中Canvas绘图基础详解(附源码下载) (转)
Android中Canvas绘图基础详解(附源码下载) 原文链接 http://blog.csdn.net/iispring/article/details/49770651 AndroidCa ...
- canvas绘图API详解
canvas绘图API详解 1.context的状态 矩阵变换属性 当前剪辑区域 context的其他状态属性: strokeStyle, fillStyle, globalAlpha, lineWi ...
- C#中string.format用法详解
C#中string.format用法详解 本文实例总结了C#中string.format用法.分享给大家供大家参考.具体分析如下: String.Format 方法的几种定义: String.Form ...
- @RequestMapping 用法详解之地址映射
@RequestMapping 用法详解之地址映射 引言: 前段时间项目中用到了RESTful模式来开发程序,但是当用POST.PUT模式提交数据时,发现服务器端接受不到提交的数据(服务器端参数绑定没 ...
- linux管道命令grep命令参数及用法详解---附使用案例|grep
功能说明:查找文件里符合条件的字符串. 语 法:grep [-abcEFGhHilLnqrsvVwxy][-A<显示列数>][-B<显示列数>][-C<显示列数>] ...
- mysql中event的用法详解
一.基本概念mysql5.1版本开始引进event概念.event既“时间触发器”,与triggers的事件触发不同,event类似与linux crontab计划任务,用于时间触发.通过单独或调用存 ...
- CSS中伪类及伪元素用法详解
CSS中伪类及伪元素用法详解 伪类的分类及作用: 注:该表引自W3School教程 伪元素的分类及作用: 接下来让博主通过一些生动的实例(之前的作业或小作品)来说明几种常用伪类的用法和效果,其他的 ...
- c++中vector的用法详解
c++中vector的用法详解 vector(向量): C++中的一种数据结构,确切的说是一个类.它相当于一个动态的数组,当程序员无法知道自己需要的数组的规模多大时,用其来解决问题可以达到最大节约空间 ...
随机推荐
- url 编码(percentcode 百分号编码)(转载)
原文地址:http://www.cnblogs.com/leaven/archive/2012/07/12/2588746.html http://www.imkevinyang.com/2009 ...
- HTTP Method详细解读(`GET` `HEAD` `POST` `OPTIONS` `PUT` `DELETE` `TRACE` `CONNECT`)
前言 HTTP Method的历史: HTTP 0.9 这个版本只有GET方法 HTTP 1.0 这个版本有GET HEAD POST这三个方法 HTTP 1.1 这个版本是当前版本,包含GET HE ...
- 最全面的百度地图JavaScript离线版开发
转载请注明出处:http://www.cnblogs.com/Joanna-Yan/p/5822231.html 项目要求web版百度地图要离线开发.这里总结下自己的开发过程和经验. 大概需求是:每辆 ...
- Vertica环境安装R-Lang包提示缺少libgfortran.so.1
环境:RHEL 6.4 + Vertica 7.0.0-11.最终确认安装compat-libgfortran-41-4.1.2-39.el6.x86_64.rpm即可解决. # rpm -ivh v ...
- 解决Jquery Kendo.xxx is not a function 的方法
不知道大家遇到过没有,要同时间使用Telerick 和Kendo的时候 这个问题搞了我好多天,其实解决方法很简单,就是在LAYOUT里面先写TELERIK的注册脚本, 再写KENDO的. @(Html ...
- SSM项目搭建(提供源码)
1创建web动态项目,项目结构截图 2.配置日志文件 #\u5B9A\u4E49LOG\u8F93\u51FA\u7EA7\u522B log4j.rootLogger=INFO,Console,Fi ...
- xmpp
xmpp学习 下载: Openfire 服务器:Openfire 4.0.2 客户端:Spark 2.7.7 安装 Openfire安装: 根据提示一直下一步,服务器域名设置为:localhost(p ...
- how to use panda
0.Introduce pandas.read_csv(filepath_or_buffer,sep=', ', dialect=None, compression='infer', doublequ ...
- python之最强王者(4)——字符串
1.Python 中文编码 前面章节中我们已经学会了如何用 Python 输出 "Hello, World!",英文没有问题,但是如果你输出中文字符"你好,世界" ...
- 高性能 TCP & UDP 通信框架 HP-Socket v3.4.1
HP-Socket 是一套通用的高性能 TCP/UDP 通信框架,包含服务端组件.客户端组件和 Agent 组件,广泛适用于各种不同应用场景的 TCP/UDP 通信系统,提供 C/C++.C#.Del ...