HTML5畫布-小球碰撞

阿珏酱發表於2024-05-20
HTML

Tips：當你看到這個提示的時候，說明當前的文章是由原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>



本部落格所有文章 如無特別註明 均為原創。 作者： 阿珏 ， 複製或轉載請 以超連結形式 註明轉自 阿珏部落格 。
原文地址《 HTML5畫布-小球碰撞 》

網友評論：

bandwagonhost 3年前 (2017-08-15)
朋友 交換連結嗎

阿珏 3年前 (2017-08-16)
@bandwagonhost：可以到友情連結申請頁面自主申請的噢

相關文章