之前学习了使用CanvasRenderingContext2D对象的arc()方法来绘制弧线或圆形。
今天，我们接着介绍CanvasRenderingContext2D对象的方法arcTo()的用法。
arcTo(x1, y1, x2, y2, radius)
arcTo()方法将利用当前端点、端点1(x1,y1)和端点2(x2,y2)这三个点所形成的夹角，然后绘制一段与夹角的两边相切并且半径为radius的圆上的弧线。弧线的起点就是当前端点所在边与圆的切点，弧线的终点就是端点2(x2,y2)所在边与圆的切点，并且绘制的弧线是两个切点之间长度最短的那个圆弧。此外，如果当前端点不是弧线起点，arcTo()方法还将添加一条当前端点到弧线起点的直线线段。
上述字面解释可能不易理解，我们最好结合实际的代码示例来帮助理解，请先参考下面的代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5 Canvas arcTo()绘制弧线入门示例</title>
</head>
<body>
<!-- 添加canvas标签，并加上红色边框以便于在页面上查看 -->
<canvas id="myCanvas" width="400px" height="300px" style="border: 1px solid red;">
您的浏览器不支持canvas标签。
</canvas>
<script type="text/javascript">
//获取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();
}
</script>
</body>
</html>
使用canvas arcTo()绘制的弧线
如上图所示，由于在使用arcTo()绘制弧线时，「画笔」所在的端点为(150,50)，所以坐标点(150,50)就是当前端点，接着我们在arcTo()方法的参数中指定了端点1(200,50)和端点2(200,100)，因此arcTo()将绘制出与这三个端点所形成的夹角的两边相切、并且半径为50px的圆上的一段弧线。此外，夹角两边与圆相切的两个切点，将圆分成了两段圆弧，一段就是上图绘制出来的1/4圆弧，一段则是剩下的3/4圆弧，由于arcTo()将会沿着最短圆弧的方向绘制弧线，所以绘制出来的弧线就是较短的1/4圆弧。
在上面的示例中，由于我们设定的这三个端点比较特殊，当前端点和端点2实际上就是弧线所在圆与对应的夹角两边相切的切点。也就是说，当前端点就在弧线所在的圆上，并且是所绘制的圆弧的起点。现在，我们再来看看当前端点不是弧线起点的情况：
<script type="text/javascript">
//获取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();
}
</script>
当前端点不是圆弧起点时的图形效果
通过观察上面的显示效果你会发现，这和我们第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个实例代码完全相同的图形效果。
相关推荐
在使用`arcTo()`之前，通常需要先使用`moveTo()`方法将画笔移动到切点之一，以确保弧线的起始位置正确。`arcTo()`方法并不直接画出一个完整的圆，而是根据给定的切点和半径画出一段弧线。这意味着，你可以通过调整...
HTML canvas中 arcTo()的使用方法,希望对您学习canvas中的arcTo()有所帮助以后还会持续的更新关于网页制作编写上的,希望您能多多支持
《HTML5 Canvas 开发详解》第二版pdf 版
该代码是一个完整的Android工程，详细演示如了如何使用Android中的各种drawXXX方法，以及画笔Paint如何影响绘制的效果。 具体参见博文： http://blog.csdn.net/iispring/article/details/49770651
本文将深入解析`drawBitmap()`方法的参数及其用法，并通过实例来说明如何使用该方法。 `drawBitmap(Bitmap bitmap, Rect src, Rect dst, Paint paint)`是`drawBitmap()`方法的一个重载版本，其参数含义如下： 1. *...
这个“canvas简单实例详解”将带你深入了解Canvas的基本用法和常见操作，为你的网页开发添加丰富的视觉效果。 一、Canvas基本结构 Canvas元素在HTML中以`<canvas>`标签表示，可以通过ID来引用并进行JavaScript操作...
Canvas提供`fillText(text, x, y)`和`strokeText(text, x, y)`方法来绘制文本，还可以使用`font`属性设置字体样式，`textAlign`和`textBaseline`调整文本对齐方式。 六、动画制作 通过定时更新画布内容，可以实现...
这本书《Html5 Canvas开发详解》第二版提供了详细的示例代码，帮助学习者深入理解Canvas的用法和技巧。我们将逐一探讨每个章节的可能涵盖的知识点。 1. **第一章**: 基础入门 这一章通常会介绍Canvas的基本概念，...
HTML5 Canvas是Web开发中的一个强大工具，它允许开发者在网页上进行动态图形绘制，提供了丰富的API接口...通过阅读和实践，开发者不仅可以掌握Canvas的基本用法，还能探索更高级的应用，将网页图形设计提升到新的层次。
Canvas API提供了大量的方法和属性，使得开发者能够像使用画布一样在网页上绘制线条、形状、图像，并实现动画效果。在"HTML5 Canvas开发详解第二版 示例代码"中，我们可以深入学习和实践Canvas的各种功能。 这本书...
4. **图像处理**：Canvas可以加载和操作图像，例如使用`drawImage()`方法绘制图片，或者通过`getImageData()`和`putImageData()`进行像素级操作，实现滤镜效果。 5. **动画**：Canvas适合创建流畅的动画，通过不断...
每个示例都是一个独立的功能点，通过阅读和运行这些代码，可以逐步掌握Canvas API的使用方法，提升实际开发能力。 总的来说，《HTML5 Canvas开发详解（第2版）》结合“html5Canvas-2code”源码，为读者提供了一个...
在小程序开发中，经常需要在canvas上绘制图片，这时就需要使用到drawImage方法。小程序中的drawImage方法与HTML5中canvas的drawImage方法类似，它允许我们在canvas画布上绘制图像。 首先，drawImage方法有三个不同...
1. **基础概念**：书中首先介绍了Canvas的基本用法，包括如何在HTML中创建Canvas元素，以及如何通过JavaScript获取Canvas的2D渲染上下文。此外，还会讲解坐标系统、颜色填充与描边、线型与渐变等基本绘图操作。 2. ...
通过HTML5+Canvas开发详解（第2版），你将学到如何使用Canvas进行绘图、渲染文字、处理图像、创建动画，而这些是开发交互式Web游戏的必备知识。 本书针对Canvas和HTML5技术的最新变动进行了更新，其中包含了大量...
《HTML5 Canvas开发详解（第2版）》这本书详细介绍了Canvas API的使用方法和技巧，旨在帮助读者掌握这个技术，从而在网页设计和开发中游刃有余。 Canvas作为一个基于矢量图形的画布，使用JavaScript语言来控制其...