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. Hibernate(1)——数据访问层的架构模式

    俗话说,自己写的代码,6个月后也是别人的代码……复习!复习!复习!涉及到的知识点总结如下: 数据库的概念.逻辑.数据模型概念 应用程序的分层体系结构发展 MVC设计模式与四层结构的对应关系 持久层的设 ...

  2. 【转】linux内核中writesb(), writesw(), writesl() 宏函数

    writesb(), writesw(), writesl() 宏函数 功能 : writesb()    I/O 上写入 8 位数据流数据 (1字节) writesw()   I/O  上写入 16 ...

  3. 你真的会玩SQL吗?让人晕头转向的三值逻辑

    你真的会玩SQL吗?系列目录 你真的会玩SQL吗?之逻辑查询处理阶段 你真的会玩SQL吗?和平大使 内连接.外连接 你真的会玩SQL吗?三范式.数据完整性 你真的会玩SQL吗?查询指定节点及其所有父节 ...

  4. ASP.NET Core 中文文档 第二章 指南(3)用 Visual Studio 发布一个 Azure 云 Web 应用程序

    原文:Getting Started 作者:Rick Anderson 翻译:谢炀(Kiler) 校对:孟帅洋(书缘).刘怡(AlexLEWIS).何镇汐 设置开发环境 安装最新版本的 Azure S ...

  5. golang枚举类型 - iota用法拾遗

    在c#.java等高级语言中,经常会用到枚举类型来表示状态等.在golang中并没有枚举类型,如何实现枚举呢?首先从枚举的概念入手. 1.枚举类型定义 从百度百科查询解释如下:http://baike ...

  6. 网络爬虫:使用Scrapy框架编写一个抓取书籍信息的爬虫服务

      上周学习了BeautifulSoup的基础知识并用它完成了一个网络爬虫( 使用Beautiful Soup编写一个爬虫 系列随笔汇总 ), BeautifulSoup是一个非常流行的Python网 ...

  7. EntityFramework 事务处理

    默认情况下,当EF调用SaveChanges()时,会把生成的所有SQL命令“包”到一个“事务(transaction)”中,只要有一个数据更新操作失败,整个事务将回滚. 在多数情况下,如果你总在数据 ...

  8. C#开发微信门户及应用(21)-微信企业号的消息和事件的接收处理及解密

    在上篇随笔<C#开发微信门户及应用(19)-微信企业号的消息发送(文本.图片.文件.语音.视频.图文消息等)>介绍了有关企业号的消息发送,官方特别声明消息是不用加密发送的.但是在回调的服务 ...

  9. Matlab 之 find()函数

    当我第一次用matlab语言编写一个工程项目时,发现自己编写的脚本里循环特别多,导致编程效率很低,这让我特别苦恼.有一次导师让我阅读他编写的一个Matlab脚本,并按照新要求对其进行更改.我发现脚本里 ...

  10. 分布式文件系统 - FastDFS 配置 Nginx 模块及上传测试

    也不说废话,直接干 上一篇 分布式文件系统 - FastDFS 在 CentOS 下配置安装部署 中安装了 FastDFS 后,并配置启动了 Tracker 和 Storage 服务,已经可以上传文件 ...