canvas 实现规则多边形

Posted 2020-10-06 小芹菜的琴

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了canvas 实现规则多边形相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <canvas id="mycanvas" width="1000" height="1000"></canvas>
</head>
<body>
</body>
<script>
    var c = document.getElementById(\'mycanvas\');
    var ctx = c.getContext("2d");
    /*直接画三角形*/
    var deg = Math.PI*2/360;

    /*function trans(c,x,y,r) {
        c.translate(x,y);
        c.moveTo(0,0);
        c.lineTo(r,0);
        c.rotate(-60*deg);
        c.lineTo(r,0);
        //c.closePath();
        c.strokeStyle = "blue";
        c.stroke();

        //c.fillStyle = "#333";
        //c.fill();
    }*/
  //trans(ctx,300,300,150);


//这个函数就是画多个规则多边形
    function polygon(c,n,x,y,r,angle) {
        //debugger;
       angle = angle || 0;
        //counterclockwise = counterclockwise ||false;
        c.translate(x,y);    //把中心点移到(0,0)
        c.moveTo(0,0);
        var delta = 2*Math.PI/n;   //外角的度数 
        for(var i=0;i<n-1;i++){
            c.lineTo(r,0);        //首先画一条水平直线
            c.translate(r,0);     //平移坐标
            angle = -delta;
            c.rotate(angle);     //旋转坐标
        }
        c.closePath();
        c.fillStyle=\'#333\';
        c.stroke();
        c.fill();
    }
    //ctx.beginPath();
    polygon(ctx,3,500,500,100);

    polygon(ctx,4,500,500,100);


</script>
</html>

以上是关于canvas 实现规则多边形的主要内容，如果未能解决你的问题，请参考以下文章

Flutter 自定义 View 介绍

数学篇08 # 如何利用三角剖分和向量操作描述并处理多边形？

canvas画板绘图矩形圆形椭圆自定义多边形画笔/铅笔曲线橡皮擦

canvas绘制多边形

canvas绘制直线和多边形基本操作

自己定义View时，用到Paint Canvas的一些温故，简单的帧动画（动画一，"掏粪男孩Gif"顺便再提提onWindowFocusChanged）(代码片段