提示：當你看到這個提示的時候，說明當前的文章是由原emlog博客系統搬遷至此的，文章發佈時間已過於久遠，編排和內容不一定完整，還請諒解`
HTML5 畫布 - 小球碰撞
日期：2017-7-18 阿珏 HTML 瀏覽：2465 次 評論：2 條
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>
網友評論：
bandwagonhost 3 年前 (2017-08-15)
朋友 交換鏈接嗎
阿珏 3 年前 (2017-08-16)
@bandwagonhost：可以到友情鏈接申請頁面自主申請的噢