HTML5 用canvas画正多边形

Hillbox

已于 2022-08-16 17:47:41 修改

阅读量533

点赞数

CC 4.0 BY-SA版权

分类专栏： html5 文章标签： html5 html 前端

于 2022-08-16 15:52:31 首次发布

本文链接：https://blog.youkuaiyun.com/qq_33514421/article/details/126367776

html5 专栏收录该内容

11 篇文章

订阅专栏

这篇博客介绍如何使用HTML5的Canvas API来绘制正多边形。通过理解正多边形的几何特性，利用角度和三角函数计算每个顶点的坐标，结合JavaScript实现动态画图。示例代码中展示了创建一个六边形的过程，通过指定中心坐标、半径和边数即可完成绘制，并填充为‘HotPink’颜色。

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

对书上代码的理解。

canvas画线条、矩形就不讲了，现在要画正多边形。正多边形都有一个外接圆，圆心和半径被认为是正多边形的中心和大小，如下图的O(dx, dy)和size，这两个变量就是函数的传入参数。正多边形的第一个顶点从x正半轴开始逆时针画，如下图的A点到B点到C点的顺序。利用正多边形的圆心角相等的性质，利用循环按照逆时针的顺序求出各个顶点坐标，求法就是借助角度和三角函数算出x坐标和y坐标。

<DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <script>
    window.onload = function () {
      var cnv = document.getElementById("canvas");
      var cxt = cnv.getContext("2d");
      //调用自定义的方法createPolygon()
      createPolygon(cxt, 6, 100, 75, 50);
    }
    /*
      * n：表示n边形
      * dx、dy：表示n边形中心坐标
      * size：表示n边形外接圆的半径
    */
    function createPolygon(cxt, n, dx, dy, size) {
      cxt.beginPath();
      var degree = (2 * Math.PI )/ n;
      for (var i = 0; i < n; i++) {
        var x = Math.cos(i * degree);
        var y = Math.sin(i * degree);
        cxt.lineTo(x * size + dx, y * size + dy);
      }
      cxt.closePath();
      cxt.fillStyle = "HotPink";
      cxt.fill();
    }
  </script>
</head>
<body>
  <canvas id="canvas" width="200" height="150" style="border:1px dashed gray;"></canvas>
</body>
</html>