キャンバスは円と楕円を描画します

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>

提出するリセットコード

自動運転