HTML5實現滿天星辰代碼

隨著HTML5的不斷發展，越來越多的新特性被陸續推出。其中，canvas元素的引入為我們帶來了更豐富的繪圖功能。今天，我們就來看一看如何使用HTML5的<canvas>標簽來實現滿天星辰的代碼。

首先，我們需要在HTML頁面中新增<canvas>標簽，并且指定它的寬高，如下所示：

<canvas id="myCanvas" width="600" height="400"></canvas>

接著，我們需要使用JavaScript來控制畫布的繪制。在JavaScript中，我們可以使用getContext()方法來獲取繪圖上下文。然后，我們可以使用fillStyle屬性來設置填充顏色，再使用fillRect方法來繪制矩形。

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.fillStyle = "#000000";
context.fillRect(0, 0, canvas.width, canvas.height);

接下來，我們就可以開始繪制星星了。我們可以定義一個函數drawStars()來實現。在函數中，我們可以使用arc()方法來繪制圓形，并且使用fill()方法進行填充。

function drawStars() {
for (var i = 0; i < 200; i++) {
var x = Math.random() * canvas.width;
var y = Math.random() * canvas.height;
context.beginPath();
context.arc(x, y, 1, 0, 2 * Math.PI);
context.fillStyle = "#ffffff";
context.fill();
}
}

最后，在window.onload事件中調用drawStars()函數即可實現滿天星辰的效果。

window.onload = function() {
drawStars();
};

通過以上代碼，我們就可以輕松地使用HTML5實現滿天星辰的效果了。