캔버스는 원과 타원을 그립니다.

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>

지속적인 학습

새로운 파일

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

제출하다 코드 재설정

자동운전