<!DOCTYPE html>
<html><head>
<meta charset="UTF-8">
<title>绘制实心圆和空心圆</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border: 1px solid;"></canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var context=c.getContext("2d");
context.fillStyle="#00FFFF";
context.beginPath();
context.arc(70,70,60,Math.PI*2,0,true);
context.closePath();
context.fill();
context.translate(140,10);
context.strokeStyle="#00ff11";
context.beginPath();
context.arc(70,70,60,Math.PI*2,0,true);
context.stroke();
</script>
</body>
</html>
在绘制圆形的时候会用到beginpath()、arc()、closethpath()、fill()这四个方法。
context.arc(x,y,radious,startAngle,endAngle,anticlockwise);
arc本意为用于绘制弧线，当采用适当的参数后，即可绘制圆形。参数中的x,y为起点坐标
radious为半径
startAngle为起始角度
endAngle为结束的角度
anticlockwise为是否按顺时钟方向进行绘制