1.HTML5 canvas arcTo() 用于在画布上创建介于两个切线之间的弧。但是要注意请使用 stroke() 方法在画布上绘制确切的弧。如下图所示：
2.arcTO（）的JS：
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.beginPath();
ctx.moveTo(20,20);// 创建开始点
ctx.lineTo(100,20);// 创建水平线
ctx.arcTo(150,20,150,70,50);// 创建弧
ctx.lineTo(150,120);// 创建垂直线
ctx.stroke();// 进行绘制
3.JavaScript 语法：context.fillRect(x1,y1,x2,y2,r);
x1表示弧的起点的 x 坐标，y1表示弧的起点的 y 坐标，x2表示弧的终点的 x 坐标,y2表示弧的终点的 y 坐标
r表示弧的半径。
所有代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.js"></script>
</head>
<body>
<canvas id="canvas" width="800" height="600"></canvas>
</body>
<script>
$(function(){
draw();
function draw(){
var canvas = $('#canvas')[0];//转化为JS原生DOM元素
if(!canvas.getContext){
console.log('浏览器不支持canvas')；
return false;
}//检测浏览器是否支持canvas
var ctx =canvas.getContext('2d');
//获取canvas绘图的上下文：画笔
ctx.beginPath();
ctx.moveTo(20,20); // 创建开始点
ctx.lineTo(100,20); // 创建水平线
ctx.arcTo(150,20,150,70,50); // 创建弧
ctx.lineTo(150,120); // 创建垂直线
ctx.stroke(); // 进行绘制
}
})
</script>
</html>
