Zeige Ergebnisse:
Erstens: Analyse des Problems:
- Zunächst einmal ist die statische Struktur eine Kiste, und in der Kiste befindet sich ein Kreis.
- Der Kreis bewegt sich in der Box.
- Der Prozess des Bewegens spiegelt die Zufälligkeit wider.
- Es entsteht ein Bounce-Effekt, wenn der Kreis auf den Rand des Kästchens trifft.
Zwei: Ideen zur Problemlösung:
- Die explizit verwendete API ist die Leinwand canvas. Dynamische Effekte verwenden Timer.
- Zeichnen Sie zuerst die statische Struktur.
- Berechnen Sie die Koordinaten des Mittelpunkts des Kreises, während er sich bewegt.
- Berechnen Sie die Bedingungen, unter denen der Kreis abprallt, wenn er auf den Rand des Kästchens trifft.
- Effekte werden dynamisch über Timer implementiert.
Drittens: Code-Implementierung:
<!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>动态</title>
</head>
<body>
<canvas id="myCanvas" width="500px" height="500px" style="border: 1px solid black;"></canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
function rand(mun) {
return Math.floor(Math.random() * mun + 1)
}
var arcX = 40;
var arcY = 40;
var arcR = 40;
var radX = rand(10);
var radY = rand(10);
setInterval(function () {
ctx.clearRect(0, 0, 500, 500);
arcX += radX;
arcY += radY;
if (arcX > c.width - arcR) {
radX = -radX;
}
if (arcX < arcR) {
radX = Math.abs(radX);
}
if (arcY > c.width - arcR) {
radY = -radY;
}
if (arcY < arcR) {
radY = Math.abs(radY);
}
ctx.beginPath();
ctx.fillStyle = "blue";
ctx.arc(arcX, arcY, 40, 0, 2 * Math.PI);
ctx.fill();
}, 20)
</script>
</body>
</html>
Viertens: Coole Fallteilung: