Context의 arc 메소드는 원이나 타원을 그리는 것입니다. arc 메소드의 x 및 y 매개변수는 원의 중심 좌표이고, radius는 반경이며, startAngle 및 endAngle은 원의 시작 각도와 끝 각도입니다. 섹터(라디안으로 표시), 시계 반대 방향 도면을 시계 반대 방향(true) 또는 시계 방향(false)으로 그려야 하는지 여부를 나타냅니다.
코드는 다음과 같습니다:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>huatu</title>
<body>
<canvas id="demoCanvas" width="500" height="600"></canvas>
<script type="text/javascript">
//通过id获得当前的Canvas对象
var canvasDom = document.getElementById("demoCanvas");
//通过Canvas Dom对象获取Context的对象
var context = canvasDom.getContext("2d");
context.beginPath();//开始绘制路径
//绘制以 （60,60）为圆心，50为半径长度，从0度到360度（PI是180度），最后一个参数代表顺时针旋转。
context.arc(60, 60, 50, 0, Math.PI * 2, true);
context.lineWidth = 2.0;//线的宽度
context.strokeStyle = "#000";//线的样式
context.stroke();//绘制空心的，当然如果使用fill那就是填充了。
</script>
</body>
</html>
다음 섹션