JavaScript キャンバスはマウスの動きに合わせてボールを動かすことを実装します

この記事の例では、マウスに従ってボールを動かすjsの具体的なコードを参考までに共有しています。具体的な内容は次のとおりです。

<!DOCTYPE html>
<html>
 <ヘッド>
 <メタ文字セット="utf-8">
 <タイトル></タイトル>
 <スタイル>
 キャンバス{
 境界線: 1px実線 #000;
 }
 </スタイル>
 </head>
 <本文>
 <キャンバスid="mycanvas" 幅="1500" 高さ="800"></キャンバス>
 <スクリプト>
 // キャンバスを作成します var canvas = document.getElementById('mycanvas');
 var ctx = canvas.getContext('2d');
 // ボールクラス関数 Ball(x, y) {
 this.x = x;
 y = y;
 // 初期半径 this.r = parseInt(Math.random() * 50) + 10;
 this.step = parseInt(Math.random() * 5) + 0.1;
 // ランダムな色を設定します this.color = getRandom();
 // ランダムな方向を設定します this.dx = parseInt(Math.random() * 10) - 5;
 this.dy = parseInt(Math.random() * 10) - 5;
 // オブジェクトを配列に読み込みます ballArr.push(this);
 }
 // 配列からオブジェクトを削除します。Ball.prototype.remove = function() {
 (var i = 0; i < ballArr.length; i++) の場合 {
 もし（ballArr[i] == this）{
 ボールArr.splice(i, 1);
 }
 }
 }
 // データを更新する Ball.prototype.update = function() {
 // データを更新 this.x += this.dx;
 this.y += this.dy;
 this.r -= this.step;
 // 配列内のボールをクリアする if (this.r <= 0) {
 これを削除してください。
 }
 // 境界を超えた場合、ボールは動き続けます if (this.x < 0) {
 1500 を越える文字列は無視されます。
 this.color = getRandom();
 }
 そうでない場合（this.x > 1500）{
 0 を返します。
 this.color = getRandom();
 }
 それ以外の場合 (this.y < 0) {
 y = 800; となります。
 this.color = getRandom();
 }
 そうでない場合（this.y > 800）{
 y = 0;
 this.color = getRandom();
 }
 }
 // ボールをレンダリングする Ball.prototype.render = function() {
 ctx.beginPath();
 ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2, false);
 ctx.fillStyle = this.color;
 ctx.fill();
 }
 // キャンバス DOM2 イベント canvas.addEventListener("mousemove", function(event) {
 新しいボール(event.offsetX、event.offsetY);
 });
 var ballArr = [];
 // アニメーションのレンダリングと更新のためのタイマー setInterval(function() {
 // アニメーション ロジック // 画面をクリア - 更新 - レンダリング ctx.clearRect(0, 0, canvas.width, canvas.height);
 // ボールを更新してレンダリングします for (var i = 0; i < ballArr.length; i++) {
 ballArr[i].update();
 もし(ballArr[i]) {
 ballArr[i].render();
 }
 }
 }, 30);
 // ランダムカラー関数 getRandom() {
 var allType = "0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f";
 var allTypeArr = allType.split(",");
 var color = "#";
 // 色の文字列を連結する for (var i = 0; i < 6; i++) {
 var random = parseInt(Math.random() * allTypeArr.length);
 色 += allTypeArr[ランダム];
 }
 色を返します。
 }
 </スクリプト>
 </本文>
</html>

効果