JavaScript的美妙之處在于它的可塑性，它可以被用來實(shí)現(xiàn)幾乎任何你能想到的東西。現(xiàn)在，我想與你分享如何使用JavaScript來制作一個(gè)美麗的星星效果。讓我們開始吧！
首先，我們需要?jiǎng)?chuàng)建一個(gè)HTML文件，并在其中添加一個(gè)canvas元素。我們將使用canvas來繪制星星。在這里，我給出一個(gè)簡(jiǎn)單的HTML結(jié)構(gòu)：
<!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();
}
// 繪制多個(gè)星星
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();我們使用了兩個(gè)函數(shù)：drawStar和drawStars。drawStar函數(shù)用于繪制一個(gè)五角星，它需要四個(gè)參數(shù)：星星的中心點(diǎn)坐標(biāo)x、y，星星的半徑r和星星的顏色color。我們使用一個(gè)循環(huán)語句來計(jì)算五個(gè)頂點(diǎn)的坐標(biāo)，并使用moveTo和lineTo方法將它們連接起來，最后利用fillStyle和fill方法來填充星星的顏色。
drawStars函數(shù)用于繪制多個(gè)星星。我們使用一個(gè)循環(huán)語句來計(jì)算每個(gè)星星的位置、半徑和顏色，并將它們傳遞給drawStar函數(shù)來繪制星星。我們也可以根據(jù)需要調(diào)整星星的數(shù)量、大小和顏色。
最后，我們需要將JavaScript文件添加到HTML文件中，以便在網(wǎng)頁加載時(shí)自動(dòng)調(diào)用。
使用這段代碼，我們可以得到這樣美麗的星星效果。<!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();
}
// 繪制多個(gè)星星
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>嘗試著調(diào)整參數(shù)，看看你能創(chuàng)造出什么樣的效果吧！