HTML5好玩的代碼

HTML5是現代網頁設計中使用的一種最新的技術，它可以讓網頁設計師創建出更加動態且有趣的網頁。下面是一些HTML5好玩的代碼，讓我們一起來探索它們吧！

Background-color gradient

使用CSS linear-gradient()函數可以很容易地創建出背景色漸變的效果，具體代碼如下：

body {
background: linear-gradient(to right, #FFDAB9, #FFE4E1);
}

Drag and Drop

HTML5中的drag and drop功能可以讓用戶進行元素的拖拽操作，下面是一個簡單的示例：

function allowDrop(event) {
event.preventDefault();
}
function drag(event) {
event.dataTransfer.setData("text", event.target.id);
}
function drop(event) {
event.preventDefault();
var data = event.dataTransfer.getData("text");
event.target.appendChild(document.getElementById(data));
}

Web Storage

HTML5的Web Storage功能可以讓網頁在本地存儲數據，可以讓用戶更加方便地訪問網頁。下面是一個localStorage的例子：

if(typeof(localStorage) !== "undefined") {
localStorage.setItem("name", "張三");
localStorage.setItem("age", "30");
var name = localStorage.getItem("name");
var age = localStorage.getItem("age");
}

Canvas

HTML5中的Canvas可以讓用戶進行圖形處理和動畫制作，下面是一個簡單的Canvas例子：

var canvas = document.querySelector("canvas");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(100, 75, 50, 0, 2 * Math.PI);
ctx.stroke();

Video playback rate

HTML5中的video標簽可以讓用戶從網頁上直接播放視頻，下面是一個改變播放速度的例子：

var video = document.querySelector("video");
video.playbackRate = 2;

以上是一些HTML5好玩的代碼，它們可以讓網頁更加有趣和實用。通過學習這些代碼，我們可以創建出更加豐富和有趣的網頁，讓用戶感到更加舒適和方便。