canvas 画六边形边框

最新推荐文章于 2024-04-23 12:07:19 发布

weixin_30722589

最新推荐文章于 2024-04-23 12:07:19 发布

阅读量444

点赞数 1

文章标签：移动开发 javascript ViewUI

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

版权

<!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

weixin_30722589

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
canvas 画六边形边框

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <canvas id="myCanvas" ...
复制链接

扫一扫