JavaScript Canvas implementiert die Bewegung des Balls entlang der Maus

In diesem Artikelbeispiel wird der spezifische Code von js, der der Maus folgt, um den Ball zu Ihrer Information zu bewegen, geteilt. Der spezifische Inhalt ist wie folgt

<!DOCTYPE html>
<html>
 <Kopf>
 <meta charset="utf-8">
 <Titel></Titel>
 <Stil>
 Leinwand{
 Rand: 1px durchgezogen #000;
 }
 </Stil>
 </Kopf>
 <Text>
 <canvas id="mycanvas" width="1500" height="800"></canvas>
 <Skript>
 //Eine Leinwand erstellen var canvas = document.getElementById('mycanvas');
 var ctx = canvas.getContext('2d');
 // Ball Klassenfunktion Ball(x, y) {
 dies.x = x;
 dies.y = y;
 // Anfangsradius this.r = parseInt(Math.random() * 50) + 10;
 dieser.Schritt = parseInt(Math.random() * 5) + 0,1;
 // Zufällige Farbe festlegen this.color = getRandom();
 // Zufällige Richtung festlegen this.dx = parseInt(Math.random() * 10) - 5;
 dies.dy = parseInt(Math.random() * 10) - 5;
 //Lade das Objekt in das Array ballArr.push(this);
 }
 // Entferne das Objekt aus dem Array Ball.prototype.remove = function() {
 für (var i = 0; i < ballArr.length; i++) {
 wenn (ballArr[i] == dies) {
 ballArr.splice(i, 1);
 }
 }
 }
 // Daten aktualisieren Ball.prototype.update = function() {
 // Daten aktualisieren this.x += this.dx;
 dies.y += dies.dy;
 dies.r -= dieser.Schritt;
 // Lösche die Bälle im Array if (this.r <= 0) {
 dies.entfernen();
 }
 // Wenn der Ball die Grenze überschreitet, bewegt er sich weiter if (this.x < 0) {
 dies.x = 1500;
 diese.Farbe = getRandom();
 }
 sonst wenn (this.x > 1500) {
 dies.x = 0;
 diese.Farbe = getRandom();
 }
 sonst wenn (dies.y < 0) {
 dies.y = 800;
 diese.Farbe = getRandom();
 }
 sonst wenn (dies.y > 800) {
 dies.y = 0;
 diese.Farbe = getRandom();
 }
 }
 // Rendere den Ball Ball.prototype.render = function() {
 ctx.beginPath();
 ctx.arc(dieses.x, dieses.y, dieses.r, 0, Math.PI * 2, falsch);
 ctx.fillStyle = diese.Farbe;
 ctx.fill();
 }
 // Canvas-DOM2-Ereignis canvas.addEventListener("mousemove", function(event) {
 neuer Ball (Ereignis.OffsetX, Ereignis.OffsetY);
 });
 var ballArr = [];
 // Timer für Animations-Rendering und Update setInterval(function() {
 // Animationslogik // Bildschirm löschen – aktualisieren – rendern ctx.clearRect(0, 0, canvas.width, canvas.height);
 // Aktualisiere und render den Ball für (var i = 0; i < ballArr.length; i++) {
 ballArr[i].update();
 wenn (ballArr[i]) {
 ballArr[i].render();
 }
 }
 }, 30);
 // Zufällige Farbfunktion getRandom() {
 var allType = "0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f";
 var allTypeArr = allType.split(",");
 var Farbe = "#";
 // Farbstrings verketten für (var i = 0; i < 6; i++) {
 var random = parseInt(Math.random() * allTypeArr.length);
 Farbe += allTypeArr[zufällig];
 }
 Farbe zurückgeben;
 }
 </Skript>
 </body>
</html>

Wirkung

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Das könnte Sie auch interessieren: