JS結(jié)合Canvas畫(huà)運(yùn)動(dòng)小球
作者：王珮云
canvas是HTML5新增的元素,也被稱為畫(huà)布,可以結(jié)合javascript實(shí)現(xiàn)繪制各種圖形,制作各種炫酷的動(dòng)畫(huà)效果,現(xiàn)在我們也來(lái)使用canvas畫(huà)隨機(jī)運(yùn)動(dòng)小球。
??想了解更多內(nèi)容，請(qǐng)?jiān)L問(wèn)：??
??51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)??
前言
canvas是HTML5新增的元素,也被稱為畫(huà)布,可以結(jié)合javascript實(shí)現(xiàn)繪制各種圖形,制作各種炫酷的動(dòng)畫(huà)效果,現(xiàn)在我們也來(lái)使用canvas畫(huà)隨機(jī)運(yùn)動(dòng)小球。
實(shí)現(xiàn)思路
- 首先為了達(dá)到我們想要的效果,可以先創(chuàng)建一個(gè)構(gòu)造函數(shù)。
- 給構(gòu)造函數(shù)添加對(duì)應(yīng)的屬性和方法。
- 實(shí)例化出多個(gè)對(duì)象,并且保存在數(shù)組中。
- 遍歷每個(gè)對(duì)象,實(shí)現(xiàn)畫(huà)圓。
- 間隔修改每個(gè)球的x,y值。
先準(zhǔn)備畫(huà)布確定對(duì)應(yīng)的寬高:
<canvas id="canvas" width="400" height="400"></canvas>
<script>
let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');
let maxWidth = canvas.width,
maxHeight = canvas.height;
ctx.fillStyle = '#000';
ctx.fillRect(0, 0, maxWidth, maxHeight);
</script>
因?yàn)槭请S機(jī)運(yùn)動(dòng),所以要?jiǎng)?chuàng)建一個(gè)獲取隨機(jī)數(shù)的方法:
function getRandomNum(minNum, maxNum) {
switch (arguments.length) {
case 1:
return Math.round(Math.random() * minNum + minNum);
break;
case 2:
return Math.round(
Math.random() * (maxNum - minNum) + minNum);
break;
case 0:
return 0;
break;
}
}
// 創(chuàng)建一個(gè)Ball的構(gòu)造函數(shù)
function Ball(maxWidth, maxHeight, ctx) {
this.ctx = ctx;
this.maxWidth = maxWidth;
this.maxHeight = maxHeight;
// 隨機(jī)半徑
this.r = getRandomNum(5, 15);
// 隨機(jī)x,y坐標(biāo)
this.x = getRandomNum(this.r, this.maxWidth - this.r);
this.y = getRandomNum(this.r, this.maxHeight - this.r);
// 平移速度,正負(fù)區(qū)間是為了移動(dòng)方向多樣
this.speedX = getRandomNum(-2, 2);
this.speedY = getRandomNum(-2, 2);
// 顏色隨機(jī)
this.color = `rgba(${getRandomNum(0, 255)},
${getRandomNum(0, 255)},
${getRandomNum(0, 255)},${Math.random()})`;
}
Ball.prototype = {
draw: function () {
ctx.beginPath();
ctx.fillStyle = this.color;
ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2);
ctx.fill();
ctx.closePath();
},
move: function () {
// 判斷邊界值,讓圓球始終保證在畫(huà)面內(nèi)
if (this.x > this.maxWidth - this.r || this.x < this.r) {
this.speedX = -this.speedX;
}
if (this.y > this.maxHeight - this.r || this.y < this.r) {
this.speedY = -this.speedY;
}
this.x += this.speedX;
this.y += this.speedY;
}
};
// 創(chuàng)建100個(gè)Ball實(shí)例
let balls = [];
for (let i = 0; i < 100; i++) {
let newBall = new Ball(maxWidth, maxHeight, ctx);
newBall.draw();
balls.push(newBall);
}
靜態(tài)效果
現(xiàn)在我們畫(huà)出了不同半徑和顏色的靜止圓球。
調(diào)用move方法,間隔修改每個(gè)球的x,y值。
setInterval(() => {
// 每次畫(huà)之前都要清除畫(huà)布
ctx.clearRect(0, 0, maxWidth, maxHeight);
ctx.fillStyle = '#000';
ctx.fillRect(0, 0, maxWidth, maxHeight);
for (let j = 0; j < 100; j++) {
balls[j].draw(ctx);
balls[j].move();
}
}, 100);
效果展示。
總結(jié)
canvas強(qiáng)大的繪圖能力可以使網(wǎng)頁(yè)的內(nèi)容更加豐富多彩,給用戶帶來(lái)更好的視覺(jué)效果和和交互體驗(yàn),掌握一些功能的使用可以讓我們的項(xiàng)目更好的理解與canvas相關(guān)的框架使用,也能夠創(chuàng)建豐富的web應(yīng)用,同時(shí)也要求我們更好的掌握javascript。
??想了解更多內(nèi)容，請(qǐng)?jiān)L問(wèn)：??
??51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)??
責(zé)任編輯：jianghua
來(lái)源：
鴻蒙社區(qū)
