正文

JavaScript绘制五角星教程：简单代码实现网页五角星绘制方法

/0 浏览量
0403

在这个教程中，我们将学习如何使用JavaScript在网页上绘制一个五角星。这个过程不需要任何高级的图形库或框架，只需要HTML和JavaScript的基础知识即可。我们将通过一系列简单的步骤来创建一个动态的五角星。

准备工作

在开始之前，请确保你有一个基本的HTML文件和一个JavaScript文件。HTML文件将用于创建一个画布，JavaScript文件将包含绘制五角星的代码。

HTML文件

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript绘制五角星</title>
<style>
  canvas {
    border: 1px solid black;
  }
</style>
</head>
<body>
<canvas id="starCanvas" width="400" height="400"></canvas>
<script src="drawStar.js"></script>
</body>
</html>

JavaScript文件（drawStar.js）

window.onload = function() {
  var canvas = document.getElementById('starCanvas');
  var ctx = canvas.getContext('2d');

  // 五角星的中心点
  var centerX = canvas.width / 2;
  var centerY = canvas.height / 2;

  // 五角星的边长
  var sideLength = 100;

  // 绘制五角星
  function drawStar(centerX, centerY, sideLength) {
    ctx.beginPath();
    for (var i = 0; i < 5; i++) {
      var x = centerX + sideLength * Math.cos(i * 2 * Math.PI / 5);
      var y = centerY + sideLength * Math.sin(i * 2 * Math.PI / 5);
      if (i === 0) {
        ctx.moveTo(x, y);
      } else {
        ctx.lineTo(x, y);
      }
    }
    ctx.closePath();
    ctx.fillStyle = 'red';
    ctx.fill();
  }

  // 调用函数绘制五角星
  drawStar(centerX, centerY, sideLength);
};

解析

  1. HTML结构：我们创建了一个canvas元素，它的宽度和高度被设置为400像素。canvas元素将作为绘制五角星的画布。

  2. CSS样式：为canvas添加了一个边框，以便于观察绘制的结果。

  3. JavaScript代码：

    • 我们首先获取canvas元素和它的2D渲染上下文ctx。
    • 定义五角星的中心点坐标centerX和centerY，这里我们将其设置为画布的中心。
    • 定义五角星的边长sideLength，这里我们将其设置为100像素。
    • drawStar函数通过计算五角星每个顶点的坐标来绘制五角星。它使用Math.cos和Math.sin函数来计算每个顶点的位置。
    • 使用ctx.beginPath()开始一个新的路径，然后通过ctx.lineTo()添加线段来绘制五角星的边。
    • 使用ctx.closePath()闭合路径，使用ctx.fillStyle设置填充颜色，最后使用ctx.fill()填充五角星。

  4. 调用函数：在页面加载完成后，我们调用drawStar函数来绘制五角星。

这样，我们就使用JavaScript在网页上成功绘制了一个五角星。你可以通过调整sideLength的值来改变五角星的大小，或者通过修改fillStyle来改变五角星的颜色。

-- 展开阅读全文 --