HTML5 是全球資訊網的核心語言，屬於標準通用標記語言下超文件標記語言（HTML）的第五次重大修訂。 自 1999 年以來，HTML 4.01 已有許多變化，如今，HTML 4.01 中的一些元素已被棄用，這些元素在 HTML5 中已被刪除或重新定義。為了更好地處理當今的網際網路應用程式，HTML5 添加了許多新元素和功能，例如：圖形繪製、多媒體內容、更好的頁面結構、更好的表單處理，以及一些 API，如拖放元素、定位，包括網頁應用程式快取、儲存、網路工作者等。
標籤
描述
<canvas>
標籤定義圖形，例如圖表和其他圖像。此標籤基於 JavaScript 的繪圖 API
效果展示：
您的瀏覽器不支援 H5
程式碼部分：
<canvas id="my-canvas" width="500px" height="400px" style="border:1px solid red" >
您的瀏覽器不支援 H5</canvas>
<script type="text/javascript">
<!-- 取得畫布物件 -->
var my\_canvas = document.getElementById("my-canvas");
<!-- 取得畫筆 -->
var my\_huabi = my\_canvas.getContext("2d");
var x = 50;
var y = 50;
var r = 20;
function deawBall(x,y){
<!-- 設定畫筆顏色 -->
my\_huabi.fillStyle = "green";
<!-- 開始一個新路徑 -->
my\_huabi.beginPath();
<!-- 畫出小球 -->
my\_huabi.arc(x, y, r, 0, 2 \* Math.PI);
<!-- 關閉路徑 -->
my\_huabi.fill();
}
var fx\_x = true;//當 fx_x 為 true 時，向 x 軸移動
var fx\_y = true;//當 fx_y 為 true 時，向 y 軸移動
var speen = 1;
<!-- 計時器 -->
window.setInterval("moveBall()", 10);
function moveBall(){
<!-- 判斷目前小球的運動方向 -->
if(fx\_x == true){
x += speen;
if(x >= 500-r){
<!-- 當達到底部時，向上彈 -->
fx\_x = false;
}
}else{
x -= speen;
if(x <= 0+r){
<!-- 當達到頂部時，向下彈 -->
fx\_x = true;
}
}
if(fx\_y == true){
y += speen;
if(y >= 400-r){
<!-- 當達到左側時，向右側彈 -->
fx\_y = false;
}
}else{
y -= speen;
if(y <= 0+r){
<!-- 當達到右側時，向左側彈 -->
fx\_y = true;
}
}
<!-- 清除畫布 重畫 -->
my\_huabi.clearRect(0, 0, 500, 400);
deawBall(x, y);
}
</script>