溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容主要講解“JavaScript+canvas怎么實現框內跳動小球”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“JavaScript+canvas怎么實現框內跳動小球”吧!
效果如下:
思路:
1.制定畫布,確定好坐標
2.繪制出圓形小球
3.給圓一個原始坐標,xy軸的速度
4.每20毫秒刷新一次,達到變化的目的
5.判斷邊緣
全部代碼及釋義如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<canvas id="canvas" >
當前瀏覽器不支持canvas,請更新瀏覽器或者升級瀏覽器后再試
</canvas>
<script>
// x: 小球原始x坐標,y: 小球原始y坐標, r: 小球半徑, vx: x軸速度,vy: y軸的速度 (速度都以向量表示,所以可為負數)
var ball = { x: 512, y: 100, r: 20, vx: -8, vy: 8, color: '#005588' }
window.onload = function () {
var canvas = document.getElementById("canvas");
// 制定canvas畫布的大小
canvas.width = 860;
canvas.height = 600;
// 判斷瀏覽器是否支持canvas
if (canvas.getContext("2d")) {
// 下面所有調用的函數都是基于context這個上下文環境來進行的
var context = canvas.getContext("2d");
setInterval(() => {
render(context)
update()
}, 20);
} else {
alert("當前瀏覽器不支持canvas,請更新瀏覽器或者升級瀏覽器后再試");
}
};
//十六進制顏色隨機
function color16() {
var r = Math.floor(Math.random() * 256);
var g = Math.floor(Math.random() * 256);
var b = Math.floor(Math.random() * 256);
var color = '#' + r.toString(16) + g.toString(16) + b.toString(16);
return color;
}
// 小球的坐標的刷新
function update() {
ball.x += ball.vx // x軸坐標 vx是x軸的速度,勻速增加
ball.y += ball.vy // y軸坐標 由于g的原因,速度是勻變速
// 觸底的條件
if (ball.y >= canvas.height - ball.r) {
ball.color = color16()
ball.y = canvas.height - ball.r // 觸下底
ball.vy = -ball.vy
} else if (ball.x <= ball.r) {
ball.color = color16()
ball.x = ball.r // 觸左
ball.vx = -ball.vx
} else if (ball.x >= canvas.width - ball.r) {
ball.color = color16()
ball.x = canvas.width - ball.r // 觸右
ball.vx = - ball.vx
} else if (ball.y <= ball.r) {
ball.color = color16()
ball.y = ball.r // 觸上
ball.vy = -ball.vy
}
}
// 繪制圓形小球
function render(cxt) {
// 利用clearRect,清空畫布
cxt.clearRect(0, 0, cxt.canvas.width, cxt.canvas.height)
cxt.fillStyle = ball.color
cxt.beginPath()
//context.arc(圓心橫坐標, 原型縱坐標, 半徑的長度,繪制的起點, 繪制的終點)
cxt.arc(ball.x, ball.y, ball.r, 0, 2 * Math.PI)
cxt.closePath()
cxt.fill()
}
</script>
</body>
</html>到此，相信大家對“JavaScript+canvas怎么實現框內跳動小球”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
