HTML5實驗2

HTML5是HTML標準的最新版本，它引入了一系列新的語法和API，使得網頁可以實現更復雜的功能。在本實驗中，我們將學習如何使用HTML5的一些新特性。

使用canvas繪制圖像

HTML5的canvas元素允許我們動態地繪制圖像和動畫。以下代碼演示了如何在canvas上繪制一個紅色圓形:

<canvas id="myCanvas" width="200" height="200"></canvas><script>var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.fillStyle = "red";
context.beginPath();
context.arc(100, 100, 50, 0, 2*Math.PI);
context.fill();
</script>

運行以上代碼，我們將在瀏覽器中看到一個紅色的圓形。

使用GeoLocation API獲取地理位置

HTML5的GeoLocation API可以獲取用戶的地理位置信息。以下代碼演示了如何使用GeoLocation API獲取用戶的經度和緯度:

<p>正在獲取您的位置信息...</p><script>navigator.geolocation.getCurrentPosition(function(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
var message = "您的位置是:" + latitude + ", " + longitude;
document.querySelector("p").textContent = message;
});
</script>

當用戶允許瀏覽器獲取位置信息時，以上代碼將在頁面中顯示用戶的位置。

使用Web Storage API存儲數據

HTML5的Web Storage API允許我們在瀏覽器中存儲數據。以下代碼演示了如何使用Web Storage API存儲和讀取數據:

<input id="input" type="text"><button id="save">保存<p id="output"></p><script>var input = document.getElementById("input");
var output = document.getElementById("output");
document.getElementById("save").addEventListener("click", function() {
var value = input.value;
localStorage.setItem("data", value);
});
var data = localStorage.getItem("data");
if (data) {
output.textContent = "上次保存的數據是:" + data;
} else {
output.textContent = "請輸入要保存的數據";
}
</script>

以上代碼中，我們使用localStorage對象存儲和讀取數據。當用戶輸入數據并點擊保存按鈕時，數據將被存儲到瀏覽器中。當頁面刷新時，我們將讀取之前保存的數據并顯示在頁面中。