HTML canvas arcTo() 方法
实例
在画布上创建介于两个切线之间的弧：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.4.0/jquery.js"></script>
<body>
<canvas width="800" height="600" id="canvas" style="border:1px solid black"></canvas>
</body>
<script type="text/javascript">
$(function(){
draw();
function draw(){
var canvas = $('#canvas')[0];
if(!canvas.getContext){
return false;
}
var xt = canvas.getContext('2d');
xt.beginPath();
xt.moveTo(50,200);
xt.lineTo(100,200)
xt.closePath();
xt.arcTo(400,150,400,350,280);
xt.stroke();
}
})
</script>
定义和用法
arcTo() 方法在画布上创建介于两个切线之间的弧/曲线。（注意一定要写水平线，如果没有水平线圆弧画不出来）
JavaScript 语法：context.arcTo(x1,y1,x2,y2,r);
参数值
参数描述
x1:两切线交点的横坐标。
y1:两切线交点的纵坐标。
x2:第二条切线上一点的横坐标。
y2:第二条切线上一点的纵坐标。
r:弧的半径。
其中第一条线上的任意一点的横纵坐标为上一次点的位置，此示例中为 50,200。由 (x1,y1),(x2,y2),(100,20) 三点可确定两条直线的位置再由半径确定弧的位置。
