使用canvas画五角星，用户满意度评价

只会cv的小前端

已于 2024-06-12 10:12:07 修改

阅读量178

点赞数 2

文章标签： javascript 前端 html

于 2024-06-12 10:10:47 首次发布

本文链接：https://blog.csdn.net/Wancc123/article/details/139618982

版权

话不多说直接上代码，复制粘贴直接用，然后自己提取到自己项目
效果图：
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Canvas Drawing Example</title>
    <style>
      canvas {
        border: 1px solid black;
      }
    </style>
  </head>

  <body>
    <canvas id="myCanvas" width="600" height="100"></canvas>
    <script src="script.js"></script>
  </body>
</html>

<script>
  var canvas = document.getElementById("myCanvas");
  var context = canvas.getContext("2d");
  // 星星数据
  var hoollowStarData = [
    {
      isfill: true,
      cx: 50,
      cy: 50,
      spikes: 5,
      outerRadius: 40,
      innerRadius: 20,
    },
    {
      isfill: true,
      cx: 150,
      cy: 50,
      spikes: 5,
      outerRadius: 40,
      innerRadius: 20,
    },
    {
      isfill: true,
      cx: 250,
      cy: 50,
      spikes: 5,
      outerRadius: 40,
      innerRadius: 20,
    },
    {
      isfill: false,
      cx: 350,
      cy: 50,
      spikes: 5,
      outerRadius: 40,
      innerRadius: 20,
    },
    {
      isfill: false,
      cx: 450,
      cy: 50,
      spikes: 5,
      outerRadius: 40,
      innerRadius: 20,
    },
  ];

  function drawHollowStar(cx, cy, spikes, outerRadius, innerRadius, isFill) {
    var rot = (Math.PI / 2) * 3;
    var x = cx;
    var y = cy;
    var step = Math.PI / spikes;

    context.beginPath();
    context.moveTo(cx, cy - outerRadius);

    for (i = 0; i < spikes; i++) {
      x = cx + Math.cos(rot) * outerRadius;
      y = cy + Math.sin(rot) * outerRadius;
      context.lineTo(x, y);
      rot += step;

      x = cx + Math.cos(rot) * innerRadius;
      y = cy + Math.sin(rot) * innerRadius;
      context.lineTo(x, y);
      rot += step;
    }

    context.lineTo(cx, cy - outerRadius);
    context.closePath();
    context.lineWidth = 5;
    context.strokeStyle = "red";

    if (isFill) {
      context.fillStyle = "red";
      context.fill();
    }
    context.stroke();
  }

  // drawHollowStar(50, 50, 5, 40, 20,ture); 
  // 中心点(50,50)，5个角，外半径40，内半径20, true是否填充内部（点亮当前星星）

  hoollowStarData.map((item) => {
    drawHollowStar(
      item.cx,
      item.cy,
      item.spikes,
      item.outerRadius,
      item.innerRadius,
      item.isfill
    );
  });
</script>