canvas 画六边形边框

最新推荐文章于 2025-06-20 16:04:49 发布

weixin_30722589

最新推荐文章于 2025-06-20 16:04:49 发布

阅读量482

点赞数 1

CC 4.0 BY-SA版权

文章标签：移动开发 javascript ViewUI

原文链接：http://www.cnblogs.com/jeremylee/p/5594490.html

本文介绍了一种使用HTML5 Canvas API绘制多种几何形状的方法，包括五边形、三角形、六边形及更多。通过JavaScript代码实现图形的定位、旋转及填充，帮助读者理解如何灵活地创建各种矢量图形。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

<body>
    <canvas id="myCanvas" width='500' height='500'>测试</canvas>
    <script>
    var myCanvas = document.getElementById("myCanvas");
    var context = myCanvas.getContext("2d");

    function drawPath(x, y, n, r) {
        var i, ang;
        ang = Math.PI * 2 / n //旋转的角度
        context.save(); //保存状态
        context.fillStyle = 'rgba(0,0,0,0)'; //填充红色，半透明
        context.strokeStyle = 'hsl(120,50%,50%)'; //填充绿色
        context.lineWidth = 1; //设置线宽
        context.translate(x, y); //原点移到x,y处，即要画的多边形中心
        context.moveTo(0, -r); //据中心r距离处画点
        context.beginPath();
        for (i = 0; i < n; i++) {
            context.rotate(ang) //旋转
            context.lineTo(0, -r); //据中心r距离处连线
        }
        context.closePath();
        context.stroke();
        context.fill();
        context.restore(); //返回原始状态
    }
    drawPath(100, 100, 5, 40) //在100,100处画一个半径为40的五边形
    drawPath(200, 100, 3, 40) //在200,100处画一个半径为40的三角形
    drawPath(300, 100, 6, 40) //在300,100处画一个半径为40的六边形
    drawPath(100, 200, 15, 40) //在100,200处画一个半径为40的十五边形
    drawPath(200, 200, 4, 40) //在100,200处画一个半径为40的四边形
    </script>
</body>

</html>

转载于:https://www.cnblogs.com/jeremylee/p/5594490.html