此文参考链接
这里只是对上面参考链接的补充,先有个大致的掌握。
首先,参数该函数的参数如下:
ctx.arcTo(x1,y1,x2,y2,radius);
(x1,y1)起点坐标,(x2,y2)终点坐标,radius半径。
这时正常人都会有疑惑,已知两个点和半径就可以画弧线?当然不是!!这也是很多书上没有讲清楚的。
如果没有指明第三个点,那么这个点默认是原点(DOM的左上角位置)。
例如:我想画一个arc(100,20,100,70,50)这样一段弧,那么我应该这样做:
ps:时间仓促,来不及解释了。
先画出arcTo函数里的两点的连线,再画arcTo函数里第一个点和原点的连线,然后在这个夹角内做半径为50px的圆弧,并且和两条线相切。
验证:
实验代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>arcTo函数</title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="500" height="600">
您的浏览器不支持canvas
</canvas>
<script type="text/javascript">
var canv = document.getElementById("myCanvas");
var ctx = canv.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(100,20);
ctx.lineTo(100,70);
ctx.stroke();
ctx.beginPath();
ctx.save();
ctx.strokeStyle = "red";
ctx.moveTo(0,0);
ctx.arcTo(100,20,100,70,50);
ctx.stroke();
ctx.restore();
</script>
</body>
</html>