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()用法详解的更多相关文章

  1. canvas arcTo()用法详解 – CodePlayer

    canvas arcTo()用法详解 – CodePlayer canvas arcTo()用法详解

  2. Android中Canvas绘图基础详解(附源码下载) (转)

    Android中Canvas绘图基础详解(附源码下载) 原文链接  http://blog.csdn.net/iispring/article/details/49770651   AndroidCa ...

  3. canvas绘图API详解

    canvas绘图API详解 1.context的状态 矩阵变换属性 当前剪辑区域 context的其他状态属性: strokeStyle, fillStyle, globalAlpha, lineWi ...

  4. C#中string.format用法详解

    C#中string.format用法详解 本文实例总结了C#中string.format用法.分享给大家供大家参考.具体分析如下: String.Format 方法的几种定义: String.Form ...

  5. @RequestMapping 用法详解之地址映射

    @RequestMapping 用法详解之地址映射 引言: 前段时间项目中用到了RESTful模式来开发程序,但是当用POST.PUT模式提交数据时,发现服务器端接受不到提交的数据(服务器端参数绑定没 ...

  6. linux管道命令grep命令参数及用法详解---附使用案例|grep

    功能说明:查找文件里符合条件的字符串. 语 法:grep [-abcEFGhHilLnqrsvVwxy][-A<显示列数>][-B<显示列数>][-C<显示列数>] ...

  7. mysql中event的用法详解

    一.基本概念mysql5.1版本开始引进event概念.event既“时间触发器”,与triggers的事件触发不同,event类似与linux crontab计划任务,用于时间触发.通过单独或调用存 ...

  8. CSS中伪类及伪元素用法详解

    CSS中伪类及伪元素用法详解   伪类的分类及作用: 注:该表引自W3School教程 伪元素的分类及作用: 接下来让博主通过一些生动的实例(之前的作业或小作品)来说明几种常用伪类的用法和效果,其他的 ...

  9. c++中vector的用法详解

    c++中vector的用法详解 vector(向量): C++中的一种数据结构,确切的说是一个类.它相当于一个动态的数组,当程序员无法知道自己需要的数组的规模多大时,用其来解决问题可以达到最大节约空间 ...

随机推荐

  1. Android随笔之——Android时间、日期相关类和方法

    今天要讲的是Android里关于时间.日期相关类和方法.在Android中,跟时间.日期有关的类主要有Time.Calendar.Date三个类.而与日期格式化输出有关的DateFormat和Simp ...

  2. sql重置自增长

    SQL的自增列挺好用,只是开发过程中一旦删除数据,标识列就不连续了 写起来 也很郁闷,所以查阅了一下标识列重置的方法 发现可以分为三种: --- 删除原表数据,并重置自增列 truncate tabl ...

  3. 用struts2标签如何从数据库获取数据并在查询页面显示。最近做一个小项目,需要用到struts2标签从数据库查询数据,并且用迭代器iterator标签在查询页面显示,可是一开始,怎么也获取不到数据,想了许久,最后发现,是自己少定义了一个变量,也就是var变量。

    最近做一个小项目,需要用到struts2标签从数据库查询数据,并且用迭代器iterator标签在查询页面显示,可是一开始,怎么也获取不到数据,想了许久,最后发现,是自己少定义了一个变量,也就是var变 ...

  4. [原创]django+ldap+memcache实现单点登录+统一认证

    前言 由于公司内部的系统越来越多,为了方便用户使用,通过django进行了单点登录和统一认证的尝试,目前实现了django项目的单点登录和非django项目的统一认证,中间波折挺多,涉及的技术包括dj ...

  5. python 数据类型---列表使用 之一

    列表的表现形式:其中的元素可以使任何数据类型,像 字符串,数字, 字典, 列表,变量 等任何类型 age = 28 name = ["Frank", "Lee" ...

  6. JAVA JSP笔记

    一.jsp加载项目中资源图片 如果直接将静态页面写的代码copy到jsp中,你会发现图片都无法加载. 获取代码: String path = request.getContextPath(); Str ...

  7. Eclipse(一)

    Eclipse的初步学习

  8. struts2杂记(一)——使用doubleSelect

    一.前言 这段时间忙的要死,做项目,学框架,时间根本不够用,只能尽量抽出时间记录自己学过的东西. 1.1.doubleSelect 在之前学习中,我们使用过二级列表,相信很多人都理解其原理,在stru ...

  9. Android InputType详解

    android:inputType 如果设置android:inputType = "number",则默认弹出的输入键盘为数字键盘,且输入的内容只能为数字. InputType文 ...

  10. 关于iPhone图片的问题。

    由于iOS设备的屏幕分辨率不尽相同,有大有小,那么在不同设备中显示同一张图片,可能会造成图片被拉伸.变形,严重影响用户体验.为了让图片在不同设备中都能得到很好的显示效果,同一类图片我们一般会准备几种版 ...