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獲得當前的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>

Continuing Learning

new file

<!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>

submit Reset Code

Automatic operation