使用HTML5 Canvas绘制半圆-之路教程

使用HTML5 Canvas绘制半圆示例

<html>

  <head>

    <style>

      body

 {

        margin: 0px;

        padding: 0px;

      }

      #myCanvas

 {

        border: 1px solid #9C9898;

      }

    </style>

    <script>

        window.onload = function ()

 {

            var canvas = document.getElementById("myCanvas");

            var context = canvas.getContext("2d");

 

            context.beginPath();

            context.arc(170, 45, 50, 0, Math.PI, false);

            context.closePath();

            context.lineWidth = 5;

            context.fillStyle = "#8ED6FF";

            context.fill();

            context.strokeStyle = "black";

            context.stroke();

        };

 

    </script>

  </head>

  <body>

    <canvas id="myCanvas" width="320" height="140"></canvas>

  </body>

</html>

html5 canvas半圆

我们可以使用ARC()方法在HTML5中创建半圆。
arc()方法将结束角定义为启动角度并添加pi。
半圆形是在抗时钟明智的半圈中创建半圆。

语法

context.arc(x, y, radius, startAngle, startAngle + Math.PI, antiClockwise);

使用HTML5 Canvas绘制半圆

日期：2020-04-11 23:04:10 来源：oir作者：oir

←HTML5 Canvas圆角

如何使用HTML5 Canvas绘制阴影→

使用HTML5 Canvas绘制半圆示例

html5 canvas半圆

语法

目录