キャンバスは、マウスがまぶしい小さなボールの実装に従ってください。

2022-01-21 05:51:28

マウスのボールを追う

<ブロッククオート

キャンバスに負けず劣らず、とても楽しかったです。

エフェクトの実装

超クール

実装原理

ボールを作成する
blobにランダムな色とランダムな半径を追加する
マウスの動きをインスタンス化して新しいBlobを追加する
プロトタイプに追加されたメソッドを呼び出して、ブロブをアニメートさせる
タイマーを使ってキャンバスを継続的に更新する

処理の実装

ボールを作成する

create関数は、blobのすべてのスタイルを保存し、関数のインスタンスを作成して、マウスの現在位置を Ball 関数で作成したボールをインスタンス化し、最後に作成したボールを配列に格納し、各ボールのプロパティと値をオブジェクトとして保持します

function Ball(x, y, r) {
    this.x = x;
    this.y = y;
    this.r = r;
    this.color = getRandom();//generate a random color
    this.dx = parseInt(Math.random() * 10) - 5;//generate the random move position
    this.dy = parseInt(Math.random() * 10) - 5;//`-5` is to allow the ball to move randomly around
    ballArr.push(this);//add the ball
}
//Listen for mouse movement events
canvas.addEventListener('mousemove', function (e) {
    new Ball(e.offsetX, e.offsetY, parseInt(Math.random() * 20));
    /* Instantiate Ball as a Ball object to call the methods of the prototype via __proto__ *})

ランダムカラーを生成する

<ブロッククオート

について color プロパティでは、色は6ビットの16進数値で表現されます。

したがって、6ビットの16進数をランダムに生成することで、ランダムカラーとして使用することができる

は、その 0 to f この16個の数字を配列に格納し、ランダムに6個を生成することで 0 to 16 のインデックス値を得ることができるため、配列のインデックス番号からランダムに6から 0 to f の数値は

split の配列を返します。

//set a random color
function getRandom() {
    var allType = '0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f';//hexadecimal colors
    var allTypeArr = allType.split(',');//separate into arrays by ','
    var color = '#';
    for (var i = 0; i < 6; i++) {
        //generate a random number from 0-16
        var random = parseInt(Math.random() * allTypeArr.length);
        color += allTypeArr[random];
    }
    return color;//return the randomly generated color
}

ブロブをレンダリングする

関数にプロトタイプチェーンを追加する render メソッドを通過するすべてのテストが Ball 関数は、これらのメソッドを持つオブジェクトをインスタンス化します。

この関数が行うことは Ball を保持するオブジェクトを生成し、インスタンス化します。 x,y,r これらの値

Ball.prototype.render = function () {
    ctx.beginPath();//path start
    ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2, false);//draw circle, position, radius
    ctx.fillStyle = this.color;/    ctx.fill();/}

ボール情報の更新

なぜなら、生成されたブロブ x,y,r は固定されているので、Blobの位置も固定され、変更されることはありません。

そこで、それぞれのボールの位置と半径を変化させてボールを動かす必要があり、ボールの半径が0より小さいときに remove メソッドを使用して、配列からボールを削除します。

/* Update ball position and radius Clear if less than 0 *Ball.prototype.update = function () {
    this.x += this.dx;//x changes
    this.y += this.dy;//y change
    this.r -= 0.1;//radius decreases
    if (this.r < 0) {
        this.remove();//call the added remove method
    }
}

ブロブを削除する

これは、上記の呼び出しを remove メソッドは、これは現在のボールの半径が0未満である場合iは、配列全体をトラバース、このこの、つまり、＆quot;このボール＆quotを見つけ、配列内のメソッドを呼び出して配列のこの要素を削除します

splice(index,num) メソッドは、インデックスから始まる配列から num 個の要素を削除します。

Ball.prototype.remove = function () {
    for (var i = 0; i < ballArr.length; i++) {
        if (ballArr[i] == this) {
            ballArr.slice(i, 1);//find the element that is less than 0 and remove it
        }
    }
}

キャンバスをレンダリングする

キャンバスはタイマーによって常に更新され、主に以下の手順で更新されます。

キャンバスをクリアする
配列を繰り返し、すべてのボールに関する情報を取得し、canvas にレンダリングします。
これを繰り返し呼び出すことで、ボール情報を更新する

setInterval(function () {
    ctx.clearRect(0, 0, canvas.width, canvas.height);//clear the screen
    for (var i = 0; i < ballArr.length; i++) {
        ballArr[i].update();//update the ball
        if (ballArr[i]) {
            ballArr[i].render();//render the ball
        }
    }
}, 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">
        Current browser version is not supported, please upgrade your browser
    </canvas>
    <script>
        var canvas = document.getElementById('myCanvas');
        var ctx = canvas.getContext('2d');
        // Define the position and radius of the ball
        function Ball(x, y, r) {
            this.x = x;
            this.y = y;
            this.r = r;
            this.color = getRandom();//generate a random color
            this.dx = parseInt(Math.random() * 10) - 5;//generate the random move position
            this.dy = parseInt(Math.random() * 10) - 5;
            ballArr.push(this);//add the ball
        }
        /* Update ball position and radius Clear if less than 0 *        Ball.prototype.update = function () {
            this.x += this.dx;
            this.y += this.dy;
            this.r -= 0.1;
            if (this.r < 0) {
                this.remove();// call the added remove method
            }
        }
        Ball.prototype.remove = function () {
            for (var i = 0; i < ballArr.length; i++) {
                if (ballArr[i] == this) {
                    ballArr.slice(i, 1);//find the element that is less than 0 and remove it
                }
            }
        }
        //render the ball Draw the ball
        //add methods to the prototype
        Ball.prototype.render = function () {
            ctx.beginPath();//start of path
            ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2, false);//draw circle, position, radius
            ctx.fillStyle = this.color;/            ctx.fill();
        }
        //Listen to mouse movement events
        canvas.addEventListener('mousemove', function (e) {
            new Ball(e.offsetX, e.offsetY, parseInt(Math.random() * 20));
            //Instantiate Ball as a Ball object to call the prototype's methods via __proto__
            console.log(ballArr);
        })
        var ballArr = [];
        setInterval(function () {
            ctx.clearRect(0, 0, canvas.width, canvas.height);//clear the screen
            for (var i = 0; i < ballArr.length; i++) {
                ballArr[i].update();//update the ball
                if (ballArr[i]) {
                    ballArr[i].render();//render the ball
                }
            }
        }, 20);
        // Set the random color
        function getRandom() {
            var allType = '0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f';//hexadecimal colors
            var allTypeArr = allType.split(',');//separate into arrays by ','
            var color = '#';
            for (var i = 0; i < 6; i++) {
                var random = parseInt(Math.random() * allTypeArr.length);
                // generate a random number from 0-16
                color += allTypeArr[random];
            }
            return color;//return the randomly generated color
        }
    </script>
</body>

</html>

キャンバスは、マウスの実装を眩しいに従って、この記事は、これに導入され、より関連するキャンバスは、マウスのコンテンツは、以前の記事のスクリプトのホームを検索するか、次の関連記事を閲覧し続け、私はあなたが将来的にはより多くのスクリプトのホームをサポートして願ってくださいに従ってください！この記事では、キャンバスは、マウスの実装を眩しいに従って、この記事は、に導入されています。

{{div