在这个教程中,我们将学习如何使用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);
};
解析
HTML结构:我们创建了一个
canvas元素,它的宽度和高度被设置为400像素。canvas元素将作为绘制五角星的画布。CSS样式:为
canvas添加了一个边框,以便于观察绘制的结果。JavaScript代码:
- 我们首先获取
canvas元素和它的2D渲染上下文ctx。 - 定义五角星的中心点坐标
centerX和centerY,这里我们将其设置为画布的中心。 - 定义五角星的边长
sideLength,这里我们将其设置为100像素。 drawStar函数通过计算五角星每个顶点的坐标来绘制五角星。它使用Math.cos和Math.sin函数来计算每个顶点的位置。- 使用
ctx.beginPath()开始一个新的路径,然后通过ctx.lineTo()添加线段来绘制五角星的边。 - 使用
ctx.closePath()闭合路径,使用ctx.fillStyle设置填充颜色,最后使用ctx.fill()填充五角星。
- 我们首先获取
调用函数:在页面加载完成后,我们调用
drawStar函数来绘制五角星。
这样,我们就使用JavaScript在网页上成功绘制了一个五角星。你可以通过调整sideLength的值来改变五角星的大小,或者通过修改fillStyle来改变五角星的颜色。
