绘制圆弧需要用到: ctx.arc();

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <canvas id="canv" width="300" height="300"></canvas>
    <script>
        function draw() {
            var canvas = document.getElementById('canv');
            if (!canvas.getContext) return;
            var ctx = canvas.getContext("2d");
            // 开启路径绘制
            ctx.beginPath();
            // 参数含义分别为: 圆心x, 圆心y, 半径r, 圆弧起始弧度, 圆弧结束弧度, 顺时针/逆时针(默认fasle顺时针)
            ctx.arc(150, 150, 50, 0, Math.PI, false);
            // 描边
            ctx.stroke();
            // ctx.closePath(); // 结束路径, 圆弧收尾相连
            // ctx.fill(); // 闭合路径, 并填充闭合区域
        }
        draw();
    </script>
</body>

</html>
02-11 06:39