Canvas draws circles and ellipses
Context context's arc method is to draw a circle or ellipse. The x and y parameters of the arc method are the center coordinates of the circle, radius is the radius, startAngle and endAngle are the starting angle and ending angle of the sector (expressed in radians), anticlockwise Indicates whether the drawing should be drawn counterclockwise (true) or clockwise (false).
The code is as follows:
<!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獲得當(dāng)前的Canvas對(duì)象
var canvasDom = document.getElementById("demoCanvas");
//通過Canvas Dom對(duì)象獲取Context的對(duì)象
var context = canvasDom.getContext("2d");
context.beginPath();//開始繪制路徑
//繪制以 （60,60）為圓心，50為半徑長(zhǎng)度，從0度到360度（PI是180度），最后一個(gè)參數(shù)代表順時(shí)針旋轉(zhuǎn)。
context.arc(60, 60, 50, 0, Math.PI * 2, true);
context.lineWidth = 2.0;//線的寬度
context.strokeStyle = "#000";//線的樣式
context.stroke();//繪制空心的，當(dāng)然如果使用fill那就是填充了。
</script>
</body>
</html>
