App下載

在html中怎么使用Canvas設(shè)置跟隨鼠移動(dòng)顯示標(biāo)炫彩的小球？使用Canvas設(shè)置跟隨鼠移動(dòng)顯示標(biāo)炫彩的小球?qū)崿F(xiàn)方法分享！

猿友 2021-07-14 16:17:40 瀏覽數(shù) (1806)
反饋

當(dāng)我們?cè)谑褂秒娔X和一些電子設(shè)備在瀏覽或者購(gòu)買(mǎi)東西的時(shí)候都會(huì)看到頁(yè)面中酷炫的特效，這些我們是可以通過(guò)前端語(yǔ)言來(lái)進(jìn)行實(shí)現(xiàn)的，那么今天我們就來(lái)講講有關(guān)于：“在html中怎么使用Canvas設(shè)置跟隨鼠移動(dòng)顯示標(biāo)炫彩的小球？”這問(wèn)題吧！下面是相關(guān)的內(nèi)容大家可以作為參考和學(xué)習(xí)！

canvas沒(méi)有讓我失望，真的很有意思

實(shí)現(xiàn)效果

超級(jí)炫酷

在這里插入圖片描述

實(shí)現(xiàn)原理

  • 創(chuàng)建小球
  • 給小球添加隨機(jī)顏色，隨機(jī)半徑
  • 鼠標(biāo)移動(dòng)通過(guò)實(shí)例化，新增小球
  • 通過(guò)調(diào)用給原型新增的方法，來(lái)實(shí)現(xiàn)小球的動(dòng)畫(huà)效果
  • 通過(guò)定時(shí)器不斷地更新畫(huà)布

實(shí)現(xiàn)過(guò)程

創(chuàng)建小球

通過(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)用原型的方法*/
})

生成隨機(jī)顏色

對(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);//畫(huà)圓，位置，半徑
    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 的元素，刪除
        }
    }
}

渲染畫(huà)布

通過(guò)定時(shí)器，不斷的更新畫(huà)布，主要是這幾個(gè)步驟

  • 清除畫(huà)布
  • 遍歷數(shù)組，獲取到所有小球的信息，渲染到畫(huà)布上
  • 不斷的重復(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 的元素，刪除
                }
            }
        }
        //渲染小球 畫(huà)小球
        //在原型中添加方法
        Ball.prototype.render = function () {
            ctx.beginPath();//路徑開(kāi)始
            ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2, false);//畫(huà)圓，位置，半徑
            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>

對(duì)于：“在html中怎么使用Canvas設(shè)置跟隨鼠移動(dòng)顯示標(biāo)炫彩的小球？”這個(gè)問(wèn)題，以上就是今天我們分享的相關(guān)內(nèi)容，當(dāng)然如果你有其他的方法也可以和大家一同分享你的方法，更多有關(guān)于 html其他的內(nèi)容我們都可以在W3Cschool中進(jìn)行學(xué)習(xí)和了解。 


HTML5

0 人點(diǎn)贊