HTML5 用canvas画正多边形

这篇博客介绍如何使用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>​​
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值