请使用Canvas绘画一个半圆

在前端开发中，使用HTML的<canvas>元素和JavaScript可以轻松地绘制一个半圆。以下是一个简单的示例代码，展示了如何绘制一个半圆：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Canvas 半圆示例</title>
</head>
<body>
    <canvas id="myCanvas" width="200" height="200" style="border:1px solid #000;"></canvas>
    <script>
        // 获取 canvas 元素和绘图上下文
        const canvas = document.getElementById('myCanvas');
        const ctx = canvas.getContext('2d');

        // 设置半圆的参数
        const centerX = canvas.width / 2; // 圆心x坐标
        const centerY = canvas.height / 2; // 圆心y坐标
        const radius = 70; // 半径
        const startAngle = 0; // 开始角度（以弧度为单位）
        const endAngle = Math.PI; // 结束角度（以弧度为单位），这里是π，表示半圆

        // 设置填充颜色和描边颜色
        ctx.fillStyle = 'blue';
        ctx.strokeStyle = 'red';

        // 开始绘制路径
        ctx.beginPath();
        ctx.arc(centerX, centerY, radius, startAngle, endAngle, false); // 绘制半圆，最后一个参数为false表示顺时针绘制
        ctx.closePath();

        // 填充和描边路径
        ctx.fill();
        ctx.stroke();
    </script>
</body>
</html>

在这个示例中，我们首先创建了一个<canvas>元素，并设置了其宽度和高度。然后，在JavaScript部分，我们获取了canvas元素的引用和2D绘图上下文。接下来，我们设置了半圆的参数，包括圆心的x和y坐标、半径、开始角度和结束角度。在这个例子中，我们绘制了一个上半圆，因此结束角度设置为Math.PI（即180度）。最后，我们使用beginPath()开始绘制路径，使用arc()方法绘制半圆，并使用closePath()结束路径。然后，我们使用fill()和stroke()方法分别填充和描边路径。

posted @ 2025-01-06 09:03  王铁柱6  阅读(14)  评论(0)  编辑  收藏  举报