您好,登錄后才能下訂單哦!
本文小編為大家詳細(xì)介紹“html中如何使用Canvas設(shè)置跟隨鼠移動(dòng)顯示標(biāo)炫彩的小球”,內(nèi)容詳細(xì),步驟清晰,細(xì)節(jié)處理妥當(dāng),希望這篇“html中如何使用Canvas設(shè)置跟隨鼠移動(dòng)顯示標(biāo)炫彩的小球”文章能幫助大家解決疑惑,下面跟著小編的思路慢慢深入,一起來(lái)學(xué)習(xí)新知識(shí)吧。
創(chuàng)建小球
給小球添加隨機(jī)顏色,隨機(jī)半徑
鼠標(biāo)移動(dòng)通過(guò)實(shí)例化,新增小球
通過(guò)調(diào)用給原型新增的方法,來(lái)實(shí)現(xiàn)小球的動(dòng)畫效果
通過(guò)定時(shí)器不斷地更新畫布
通過(guò)創(chuàng)建函數(shù)收納小球所有的樣式,再通過(guò)實(shí)例化函數(shù),將鼠標(biāo)當(dāng)前的位置傳遞給Ball
函數(shù),讓通過(guò)實(shí)例化創(chuàng)建出來(lái)的小球,最后將創(chuàng)建出來(lái)的小球存入數(shù)組中,數(shù)組中以對(duì)象形式存放著每個(gè)小球的屬性和屬性值
function Ball(x, y, r) {
this.x = x;
this.y = y;
this.r = r;
this.color = getRandom();//隨機(jī)生成顏色
this.dx = parseInt(Math.random() * 10) - 5;//生成隨機(jī)移動(dòng)的位置
this.dy = parseInt(Math.random() * 10) - 5;//`-5`是讓小球能向四周隨機(jī)移動(dòng)
ballArr.push(this);//添加小球
}
//監(jiān)聽(tīng)鼠標(biāo)移動(dòng)事件
canvas.addEventListener('mousemove', function (e) {
new Ball(e.offsetX, e.offsetY, parseInt(Math.random() * 20));
/*實(shí)例化Ball為Ball對(duì)象通過(guò)__proto__來(lái)調(diào)用原型的方法*/
})
對(duì)于
color
這個(gè)屬性,可以通過(guò)6位16進(jìn)制的值來(lái)表示一種顏色
因此,可以通過(guò)隨機(jī)產(chǎn)生一個(gè)6位的16進(jìn)制數(shù)來(lái)做為隨機(jī)顏色
將0到f
這16個(gè)數(shù)存入數(shù)組中,通過(guò)隨機(jī)生成6個(gè)0到16
的索引值,這樣就能通過(guò)數(shù)組的索引號(hào)隨機(jī)的獲取6個(gè)到0到f
中的數(shù)了
split
的作用是:以括號(hào)內(nèi)的參數(shù)為標(biāo)志符來(lái)分割字符串,返回?cái)?shù)組
//設(shè)置隨機(jī)顏色
function getRandom() {
var allType = '0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f';//16進(jìn)制顏色
var allTypeArr = allType.split(',');//通過(guò)','分割為數(shù)組
var color = '#';
for (var i = 0; i < 6; i++) {
//隨機(jī)生成一個(gè)0-16的數(shù)
var random = parseInt(Math.random() * allTypeArr.length);
color += allTypeArr[random];
}
return color;//返回隨機(jī)生成的顏色
}
給函數(shù)的原型鏈中添加
render
方法,讓每一個(gè)通過(guò)Ball
函數(shù)實(shí)例化出來(lái)的對(duì)象,帶有這些方法
這個(gè)函數(shù)的作用是,通過(guò)Ball
的參數(shù)生成一個(gè)圓形,在實(shí)例化的時(shí)候,會(huì)生成一個(gè)對(duì)象,這個(gè)對(duì)象里就存放的x,y,r
這些值
Ball.prototype.render = function () {
ctx.beginPath();//路徑開(kāi)始
ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2, false);//畫圓,位置,半徑
ctx.fillStyle = this.color;//顏色
ctx.fill();//填充
}
因?yàn)樯傻男∏?code>x,y,r是固定的,所以小球的位置也是固定的,不會(huì)改變
因此需要通過(guò)改變每個(gè)小球的位置和半徑讓小球動(dòng)起來(lái),當(dāng)小球的半徑小于0時(shí),調(diào)用remove
方法將小球從數(shù)組中刪除
/* 更新小球位置和半徑 小于0時(shí)清除 */
Ball.prototype.update = function () {
this.x += this.dx;//x改變
this.y += this.dy;//y改變
this.r -= 0.1;//半徑減小
if (this.r < 0) {
this.remove();//調(diào)用添加的remove方法
}
}
這是上面調(diào)用的remove
方法,當(dāng)this
也就是當(dāng)前小球半徑小于0時(shí) i,遍歷整個(gè)數(shù)組,找到這個(gè)this
,也就是”這個(gè)小球“,通過(guò)調(diào)用數(shù)組中的方法,刪除掉數(shù)組的這個(gè)元素
splice(index,num)
方法可刪除從index
處開(kāi)始刪除num
個(gè)元素
Ball.prototype.remove = function () {
for (var i = 0; i < ballArr.length; i++) {
if (ballArr[i] == this) {
ballArr.splice(i, 1);//找到這個(gè)小于0 的元素,刪除
}
}
}
通過(guò)定時(shí)器,不斷的更新畫布,主要是這幾個(gè)步驟
清除畫布
遍歷數(shù)組,獲取到所有小球的信息,渲染到畫布上
不斷的重復(fù)調(diào)用,更新小球信息
setInterval(function () {
ctx.clearRect(0, 0, canvas.width, canvas.height);//清屏
for (var i = 0; i < ballArr.length; i++) {
ballArr[i].update();//更新小球
if (ballArr[i]) {
ballArr[i].render();//渲染小球
}
}
}, 20);
完整代碼:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
background: black;
}
canvas {
display: block;
border: 1px solid black;
margin: 0 auto;
}
</style>
</head>
<body>
<canvas width="1000px" height="1000px" id="myCanvas">
當(dāng)前瀏覽器版本不支持,請(qǐng)升級(jí)瀏覽器
</canvas>
<script>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
//定義球的位置和半徑
function Ball(x, y, r) {
this.x = x;
this.y = y;
this.r = r;
this.color = getRandom();//隨機(jī)生成顏色
this.dx = parseInt(Math.random() * 10) - 5;//生成隨機(jī)移動(dòng)的位置
this.dy = parseInt(Math.random() * 10) - 5;
ballArr.push(this);//添加小球
}
/* 更新小球位置和半徑 小于0時(shí)清除 */
Ball.prototype.update = function () {
this.x += this.dx;
this.y += this.dy;
this.r -= 0.1;
if (this.r < 0) {
this.remove();//調(diào)用添加的remove方法
}
}
Ball.prototype.remove = function () {
for (var i = 0; i < ballArr.length; i++) {
if (ballArr[i] == this) {
ballArr.splice(i, 1);//找到這個(gè)小于0 的元素,刪除
}
}
}
//渲染小球 畫小球
//在原型中添加方法
Ball.prototype.render = function () {
ctx.beginPath();//路徑開(kāi)始
ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2, false);//畫圓,位置,半徑
ctx.fillStyle = this.color;//顏色
ctx.fill();
}
//監(jiān)聽(tīng)鼠標(biāo)移動(dòng)事件
canvas.addEventListener('mousemove', function (e) {
new Ball(e.offsetX, e.offsetY, parseInt(Math.random() * 20));
//實(shí)例化Ball為Ball對(duì)象通過(guò)__proto__來(lái)調(diào)用原型的方法
console.log(ballArr);
})
var ballArr = [];
setInterval(function () {
ctx.clearRect(0, 0, canvas.width, canvas.height);//清屏
for (var i = 0; i < ballArr.length; i++) {
ballArr[i].update();//更新小球
if (ballArr[i]) {
ballArr[i].render();//渲染小球
}
}
}, 20);
//設(shè)置隨機(jī)顏色
function getRandom() {
var allType = '0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f';//16進(jìn)制顏色
var allTypeArr = allType.split(',');//通過(guò)','分割為數(shù)組
var color = '#';
for (var i = 0; i < 6; i++) {
var random = parseInt(Math.random() * allTypeArr.length);
//隨機(jī)生成一個(gè)0-16的數(shù)
color += allTypeArr[random];
}
return color;//返回隨機(jī)生成的顏色
}
</script>
</body>
</html>
讀到這里,這篇“html中如何使用Canvas設(shè)置跟隨鼠移動(dòng)顯示標(biāo)炫彩的小球”文章已經(jīng)介紹完畢,想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過(guò)才能領(lǐng)會(huì),如果想了解更多相關(guān)內(nèi)容的文章,歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。