求助使用Canvas绘制正多边形？

图形开发canvashtml5

你知道吗，正多边形的顶点到中心点的距离都是相等的。这就意味着，我们可以用三角函数公式来计算出各个顶点的坐标。想象一下一个正六边形，它的每一个顶点坐标都可以通过三角函数公式算出来哦！

其实，计算过程很简单：

  1. 先确定角度 θ。这个角度是360度除以边的数量。
  2. 然后，用半径 r 乘以 sinθ 来计算出 x 坐标。
  3. 最后，用半径 r 乘以 cosθ 来计算出 y 坐标。

基于这个原理，我们可以编写一个通用的函数，用来绘制各种正多边形。这个函数的源代码可能如下所示：

示例效果与源代码：

运行效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<!DOCTYPE html>
<html>

<head>
    <title>绘制曲线和路径(Path2)</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="图形系统开发实战:基础篇 示例">
    <meta name="author" content="hjq">
    <meta name="keywords" content="canvas,ladder,javascript,图形">
    <script src="./js/helper.js"></script>
</head>

<body style="overflow: hidden; margin:10px;">
    <canvas id="canvas" width="800" height="400" style="border:solid 1px #CCCCCC; "></canvas>
</body>
<script>
    // 从页面中获取画板对象
    let canvas = document.getElementById('canvas');
    // 从画板中获取“2D渲染上下文”对象
    let ctx = canvas.getContext('2d');
    // 绘制背景网格线
    drawGrid('lightgray', 10, 10);

    // 绘制从五边形至九角形的正多边形
    for (let i = 5; i < 10; i++) {
        // 绘制空心正多边形
        drawRegularPolygon(ctx, 150 * (i - 5) + 100, 100, 50, i, { "color": "blue", "lineWidth": 4 });

        // 绘制填充正多边形
        drawRegularPolygon(ctx, 150 * (i - 5) + 100, 250, 50, i, { "fillColor": "red" });

        // 绘制辅助文字
        drawText(ctx, "正" + i + "边形", 150 * (i - 5) + 100, 340);
    }

    /**
     * 绘制任意正多边形
     * @param {CanvasRenderingContext2D} ctx 
     * @param {int} x 中心点X坐标
     * @param {int} y 中心点Y坐标
     * @param {int} size 顶点到中心点的距离
     * @param {int} sideNum 边数
     * @param {Object} style 渲染样式 {color, fillColor, angle}
     */
    function drawRegularPolygon(ctx, x, y, size, sideNum, style) {
        let coords = _getEdgeCoords(size, sideNum);
        // 绘制多边形
        let num = coords.length;
        ctx.beginPath();
        for (let i = 0; i < num; i++) {
            let point = coords[i];
            if (i == 0) {
                ctx.moveTo(x + point[0], y + point[1]);
            } else {
                ctx.lineTo(x + point[0], y + point[1]);
            }
        }
        ctx.closePath();
        if (style.fillColor == null || style.fillColor === "none") {
            ctx.strokeStyle = style.color;
            ctx.lineWidth = style.lineWidth == null ? 1 : style.lineWidth;
            ctx.stroke();
        } else {
            ctx.fillStyle = style.fillColor;
            ctx.fill();
        }
    }

    // 计算正多边形坐标 
    function _getEdgeCoords(size, sideNum) {
        let vPoint = [];       //vPoint为返回得到的多边形状的各顶点坐标
        let arc = Math.PI / 2 - Math.PI / sideNum;
        let r = size;
        for (let i = 0; i < sideNum; i++) {
            arc = arc - 2 * Math.PI / sideNum;
            vPoint[i] = [r * Math.cos(arc), r * Math.sin(arc)];
        }
        return vPoint;
    }

    // 绘制文字
    function drawText(ctx, text, x, y) {
        ctx.save();
        ctx.textAlign = "center";
        ctx.baseAlignline = "bottom";
        ctx.font = "bold 18px 黑体";
        ctx.fillStyle = "black";
        ctx.fillText(text, x, y);
        ctx.restore();
    }
</script>

</html>

尝试一下 »

上一篇：Canvas怎么实现绘制地球功能？

下一篇：二次贝塞尔曲线怎么绘制？