html5_畫布繪製繪製實心圓和空心圓
阿新 • • 發佈：2018-12-22
<!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 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.stroke();
</script>
</body>
</html>
在繪製圓形的時候會用到beginpath()、arc()、closethpath()、fill()這四個方法。
context.arc(x,y,radious,startAngle,endAngle,anticlockwise);
arc本意為用於繪製弧線，當採用適當的引數後，即可繪製圓形。引數中的x,y為起點座標
radious為半徑
startAngle為起始角度
endAngle為結束的角度
anticlockwise為是否按順時鐘方向進行繪製