canvas画弧线
2022-08-29 本文已影响0人
姜治宇
canvas画弧提供了两种方法，一种是arc，一种是arcTo。两者的区别是什么呢？
arc(圆心，半径，开始角度，结束角度，顺逆时针)
1.png
要画一个弧线，首先要确定圆心位置，然后是半径，然后确定开始和结束的角度，最后是方向，是逆时针还是顺时针？
9.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<canvas id="canvas" width="300" height="200" style="border:1px dashed gray;">
</canvas>
</body>
</html>
<script>
var cnv = document.getElementById('canvas');
var cxt = cnv.getContext('2d');
cxt.beginPath();
cxt.arc(50,50,20,0,-Math.PI/2,true);//圆心，半径，开始和结束角度，false为逆时针
// cxt.closePath();
cxt.strokeStyle = 'blue';
cxt.stroke();
</script>
arcTo(控制点，结束点，半径)
arcTo的画法跟arc不一样，看一下图示。
2.png
这种画法不需要确定圆心的位置，也不需要关心方向，而只需关注开始点、控制点和结束点即可。为什么呢？
因为多边形的对角和是180°，确认一个点，另一个也可以推导出来，而且有了开始和结束点，也不需要关心方向了，参数少了很多，因此首推这种方式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<canvas id="canvas" width="300" height="200" style="border:1px dashed gray;">
</canvas>
</body>
</html>
<script>
var cnv = document.getElementById('canvas');
var cxt = cnv.getContext('2d');
cxt.moveTo(70,20);//起始点
cxt.arcTo(120,20,120,70,50);//控制点，结束点，半径
cxt.stroke();
</script>
