首页 1 2 3 4 5 6 7

JavaScript做星星的步骤

JavaScript的美妙之处在于它的可塑性，它可以被用来实现几乎任何你能想到的东西。现在，我想与你分享如何使用JavaScript来制作一个美丽的星星效果。让我们开始吧！首先，我们需要创建一个HTML文件，并在其中添加一个canvas元素。我们将使用canvas来绘制星星。在这里，我给出一个简单的HTML结构：

<!DOCTYPE html>
<html>
<head>
<title>星星效果</title>
</head>
<body>
<canvas id="star" width="400" height="400"></canvas>
<script src="index.js"></script>
</body>
</html>

接下来，我们需要在JavaScript文件中编写代码来绘制星星。我们将使用canvas的API来绘制星星。

const canvas = document.getElementById('star');
const ctx = canvas.getContext('2d');
// 绘制五角星
function drawStar(x, y, r, color) {
ctx.beginPath();
for (let i = 0; i < 5; i++) {
const degree = (i * 72 - 90) / 180 * Math.PI;
const x1 = x + r * Math.cos(degree);
const y1 = y + r * Math.sin(degree);
const x2 = x + r / 2 * Math.cos(degree + 36 / 180 * Math.PI);
const y2 = y + r / 2 * Math.sin(degree + 36 / 180 * Math.PI);
if (i === 0) {
ctx.moveTo(x1, y1);
} else {
ctx.lineTo(x1, y1);
}
ctx.lineTo(x2, y2);
}
ctx.closePath();
ctx.fillStyle = color;
ctx.fill();
}
// 绘制多个星星
function drawStars() {
for (let i = 0; i < 50; i++) {
const x = Math.random() * canvas.width;
const y = Math.random() * canvas.height;
const r = Math.random() * 10 + 5;
const color =rgb(${Math.random() * 255}, ${Math.random() * 255}, ${Math.random() * 255});
drawStar(x, y, r, color);
}
}
drawStars();

我们使用了两个函数：drawStar和drawStars。drawStar函数用于绘制一个五角星，它需要四个参数：星星的中心点坐标x、y，星星的半径r和星星的颜色color。我们使用一个循环语句来计算五个顶点的坐标，并使用moveTo和lineTo方法将它们连接起来，最后利用fillStyle和fill方法来填充星星的颜色。 drawStars函数用于绘制多个星星。我们使用一个循环语句来计算每个星星的位置、半径和颜色，并将它们传递给drawStar函数来绘制星星。我们也可以根据需要调整星星的数量、大小和颜色。最后，我们需要将JavaScript文件添加到HTML文件中，以便在网页加载时自动调用。使用这段代码，我们可以得到这样美丽的星星效果。

<!DOCTYPE html>
<html>
<head>
<title>星星效果</title>
</head>
<body>
<canvas id="star" width="400" height="400"></canvas>
<script>
const canvas = document.getElementById('star');
const ctx = canvas.getContext('2d');
// 绘制五角星
function drawStar(x, y, r, color) {
ctx.beginPath();
for (let i = 0; i < 5; i++) {
const degree = (i * 72 - 90) / 180 * Math.PI;
const x1 = x + r * Math.cos(degree);
const y1 = y + r * Math.sin(degree);
const x2 = x + r / 2 * Math.cos(degree + 36 / 180 * Math.PI);
const y2 = y + r / 2 * Math.sin(degree + 36 / 180 * Math.PI);
if (i === 0) {
ctx.moveTo(x1, y1);
} else {
ctx.lineTo(x1, y1);
}
ctx.lineTo(x2, y2);
}
ctx.closePath();
ctx.fillStyle = color;
ctx.fill();
}
// 绘制多个星星
function drawStars() {
for (let i = 0; i < 50; i++) {
const x = Math.random() * canvas.width;
const y = Math.random() * canvas.height;
const r = Math.random() * 10 + 5;
const color =rgb(${Math.random() * 255}, ${Math.random() * 255}, ${Math.random() * 255});
drawStar(x, y, r, color);
}
}
drawStars();
</script>
</body>
</html>

尝试着调整参数，看看你能创造出什么样的效果吧！