Tips：當你看到這個提示的時候，說明當前的文章是由原emlog部落格系統搬遷至此的，文章釋出時間已過於久遠，編排和內容不一定完整，還請諒解`
HTML5畫布-小球碰撞
日期：2017-7-18 阿珏 HTML 瀏覽：2465次 評論：2條
html5是萬維 網 的核心語言、 標準通用標記語言 下的一個應用 超文字標記語言 （ HTML ）的第五次重大修改 。|
標籤
|
描述
|
|---|---|
|
<canvas>
|
標籤定義圖形，比如圖表和其他影像。該標籤基於 JavaScript 的繪圖 API
|
效果展示：
程式碼部分：
<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：可以到友情連結申請頁面自主申請的噢