HTML5 畫布 - 小球碰撞
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> 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); }