HTML + CSS + JS realisiert, dass die Leinwand dem Quellcode für Spezialeffekte des kleinen Kreises der Maus folgt
|
Wirkung (Quellcode am Ende):
erreichen: 1. Tags definieren: <h1>Nordlichtnacht</h1> <canvas id="zeichnen" style="position: fest;anzeige: block;"> Der aktuelle Browser unterstützt Canvas nicht. Bitte wechseln Sie den Browser und versuchen Sie es erneut.</canvas> 2. Grundlegende Textstile:
h1{
Position: absolut;
oben: 50 %;
links: 50%;
transformieren: übersetzen(-50 %,-50 %);
Schriftgröße: 5em;
Schriftfamilie: „Fangsong“;
Farbe: RGB (38, 205, 247);
} oben: 50 %;
<Skript>
/* Holt euch zuerst die Leinwand */
var canvas = document.querySelector("#zeichnen");
var yuan = canvas.getContext("2d");
/* Binden Sie das Ereignis zur Änderung der Fenstergröße, damit die Leinwand jederzeit den sichtbaren Bereich des Browsers ausfüllen kann*/
window.onresize=Größe der Leinwand ändern;
Funktion resizeCanvas(){
Leinwand.Breite=Fenster.Innenbreite;
Leinwand.Höhe=Fenster.Innenhöhe;
}
Größe der Leinwand ändern();
/* Definieren Sie ein Array zum Speichern der kleinen Kreise, die generiert werden, wenn das Bewegungsereignis unten ausgelöst wird*/
var arr = [];
/* So zeichnet man einen kleinen Kreis, x und y sind die Anfangspositionen, r ist der Radius des Kreises*/
Funktion Kreis (x,y,r){
dies.x=x;
dies.y=y;
dies.r=r;
/* Eine zufällige Farbe erhalten */
diese.Farbe = `rgb(${255*Math.random()},${255*Math.random()},${255*Math.random()})`
/* Die Richtung der Kreisbewegung. Die Zufallsfunktion gibt eine Zufallszahl zwischen 0,0 und 1,0 zurück. x kann eine zufällige positive oder negative Zahl sein, und y ist eine zufällige positive Zahl*/
dies.xZou = parseInt(Math.random()*10-5);
dies.yZou = parseInt(Math.random()*10);
/* Füge dieses Element am Ende des arr-Arrays hinzu */
arr.push(dies);
}
/* Methode zum Aktualisieren des Kreises */
Kreis.Prototyp.aktualisiert = Funktion() {
/* x und y nehmen zu und bilden eine kreisförmige Form*/
dies.x = dies.x + dies.xZou;
dies.y = dies.y + dies.yZou;
/* Der Radius nimmt langsam ab*/
dies.r = dies.r - 0,1;
/* Lösche den Kreis, wenn der Radius kleiner als 1 ist */
wenn(dies.r<0){
dies.entfernen();
}
}
/* Lösche die Funktion des kleinen Kreises*/
Kreis.Prototyp.Entfernen = Funktion (){
/* Durchlaufe das Array, finde denselben Kreis wie den, der diese Funktion aufgerufen hat, und verwende dann die Splice-Funktion, um ihn zu löschen*/
für (lass i = 0; i < arr.length; i++) {
wenn(dies==arr[i])
{
arr.splice(i,1);
}
}
}
/* Rendere einen kleinen Kreis */
Kreis.Prototyp.Render = Funktion(){
yuan.beginPath();
yuan.arc(dies.x,dies.y,dies.r,0,2*3.14,falsch);
yuan.fillStyle = diese.Farbe;
yuan.fill();
}
/* Mouseover-Ereignisse an die Leinwand binden */
canvas.addEventListener('Mausbewegung',Funktion(e){
/* Übergeben Sie x, y, r. offsetX Abstand von der linken Seite, .., */
neuer Kreis (e.offsetX, e.offsetY, Math.random () * 15);
})
/* Der Timer rendert den kleinen Kreis und startet die Animation, alle 30 Millisekunden*/
setzeIntervall(Funktion(){
/* Bildschirm löschen */
yuan.clearRect(0,0,Leinwandbreite,Leinwandhöhe);
/* Durchlaufe das Array, um jeden Kreis zu aktualisieren und darzustellen*/
für (lass i = 0; i < arr.length; i++) {
/* erneuern*/
arr[i].aktualisiert();
/* Rendern, wenn der Browser es unterstützt */
wenn (arr[i].render()) {
arr[i].render();
}
}
},30)
</Skript> Canvas-Links Vollständiger Quellcode:
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
<title>Dokument</title>
<Stil>
*{
Rand: 0;
Polsterung: 0;
Box-Größe: Rahmenbox;
}
Körper{
Hintergrundfarbe: RGB (72, 75, 122);
}
h1{
Position: absolut;
oben: 50 %;
links: 50%;
transformieren: übersetzen(-50 %,-50 %);
Schriftgröße: 5em;
Schriftfamilie: „Fangsong“;
Farbe: RGB (38, 205, 247);
}
</Stil>
</Kopf>
<Text>
<h1>Nordlichtnacht</h1>
<canvas id="zeichnen" style="position: fest;anzeige: block;">
Der aktuelle Browser unterstützt Canvas nicht. Bitte wechseln Sie den Browser und versuchen Sie es erneut.</canvas>
<Skript>
/* Holt euch zuerst die Leinwand */
var canvas = document.querySelector("#zeichnen");
var yuan = canvas.getContext("2d");
/* Binden Sie das Ereignis zur Änderung der Fenstergröße, damit die Leinwand jederzeit den sichtbaren Bereich des Browsers ausfüllen kann*/
window.onresize=Größe der Leinwand ändern;
Funktion resizeCanvas(){
Leinwand.Breite=Fenster.Innenbreite;
Leinwand.Höhe=Fenster.Innenhöhe;
}
Größe der Leinwand ändern();
/* Definieren Sie ein Array zum Speichern der kleinen Kreise, die generiert werden, wenn das Bewegungsereignis unten ausgelöst wird*/
var arr = [];
/* So zeichnet man einen kleinen Kreis, x und y sind die Anfangspositionen, r ist der Radius des Kreises*/
Funktion Kreis (x,y,r){
dies.x=x;
dies.y=y;
dies.r=r;
/* Eine zufällige Farbe erhalten */
diese.Farbe = `rgb(${255*Math.random()},${255*Math.random()},${255*Math.random()})`
/* Die Richtung der Kreisbewegung. Die Zufallsfunktion gibt eine Zufallszahl zwischen 0,0 und 1,0 zurück. x kann eine zufällige positive oder negative Zahl sein, und y ist eine zufällige positive Zahl*/
dies.xZou = parseInt(Math.random()*10-5);
dies.yZou = parseInt(Math.random()*10);
/* Füge dieses Element am Ende des arr-Arrays hinzu */
arr.push(dies);
}
/* Methode zum Aktualisieren des Kreises */
kreis.prototyp.aktualisiert = funktion() {
/* x und y nehmen zu und bilden eine kreisförmige Form*/
dies.x = dies.x + dies.xZou;
dies.y = dies.y + dies.yZou;
/* Der Radius nimmt langsam ab*/
dies.r = dies.r - 0,1;
/* Lösche den Kreis, wenn der Radius kleiner als 1 ist */
wenn(dies.r<0){
dies.entfernen();
}
}
/* Lösche die Funktion des kleinen Kreises*/
Kreis.Prototyp.Entfernen = Funktion (){
/* Durchlaufe das Array, finde denselben Kreis wie den, der diese Funktion aufgerufen hat, und verwende dann die Splice-Funktion, um ihn zu löschen*/
für (lass i = 0; i < arr.length; i++) {
wenn(dies==arr[i])
{
arr.splice(i,1);
}
}
}
/* Rendere einen kleinen Kreis */
Kreis.Prototyp.Render = Funktion(){
yuan.beginPath();
yuan.arc(dies.x,dies.y,dies.r,0,2*3.14,falsch);
yuan.fillStyle = diese.Farbe;
yuan.fill();
}
/* Mouseover-Ereignisse an die Leinwand binden */
canvas.addEventListener('Mausbewegung',Funktion(e){
/* Übergeben Sie x, y, r. offsetX Abstand von der linken Seite, .., */
neuer Kreis (e.offsetX, e.offsetY, Math.random () * 15);
})
/* Der Timer rendert den kleinen Kreis und startet die Animation, alle 30 Millisekunden*/
setzeIntervall(Funktion(){
/* Bildschirm löschen */
yuan.clearRect(0,0,Leinwandbreite,Leinwandhöhe);
/* Durchlaufe das Array, um jeden Kreis zu aktualisieren und darzustellen*/
für (lass i = 0; i < arr.length; i++) {
/* erneuern*/
arr[i].aktualisiert();
/* Rendern, wenn der Browser es unterstützt */
wenn (arr[i].render()) {
arr[i].render();
}
}
},30)
</Skript>
</body>
</html>andere: Drei Selbstprüfungen heute: Ein bequemes Leben ist langweilig; ein Leben voller Herausforderungen und das Erringen von Siegen ist der wahre Sinn des Lebens. Damit ist dieser Artikel über den Quellcode für die Spezialeffekte des kleinen Kreises der Leinwand, die der Maus folgt, mit HTML+CSS+JS abgeschlossen. Weitere Inhalte zu den Spezialeffekten des kleinen Kreises der Leinwand, die der Maus folgt, finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen! Das könnte Sie auch interessieren:
|
<<: So binden Sie einen Docker-Container an eine externe IP und einen externen Port
Artikel empfehlen
Natives JS zur Implementierung der Drag-Position-Vorschau
In diesem Artikel wird eine kleine Demo gezeigt, ...
Detaillierte Erklärung des Responsive-Prinzips von Vue3
Inhaltsverzeichnis Überprüfung der responsiven Pr...
N Möglichkeiten, adaptive Teiler geschickt mit CSS zu implementieren
Trennlinien sind eine gängige Gestaltungsart auf ...
So installieren Sie Element UI und verwenden Vektorgrafiken in vue3.0
Hier konzentrieren wir uns nur auf die Installati...
Beispielcode zur Installation von Jenkins mit Docker
Zwei Probleme, die bei der Installation von Docke...
Beispiel für die Implementierung einer To-Do-Anwendung mit Vue
Hintergrund Zunächst möchte ich sagen, dass ich k...
Verwenden Sie Vue3 zur Datenbindung und Anzeigelistendaten
Inhaltsverzeichnis 1. Vergleich mit Vue2 1. Neue ...
Mehrere beliebte Website-Navigationsrichtungen in der Zukunft
<br />Dies ist nicht nur ein Zeitalter der I...
Lösung für den Docker-Container, der keine Schreibberechtigung für das Host-Verzeichnis hat
Beim Anwenden von Docker-Containern mounten wir h...
Detaillierte Erklärung des Explain-Typs in MySQL
Einführung: In vielen Fällen denken viele Leute, ...
Verwendung und Optimierung der MySQL COUNT-Funktion
Inhaltsverzeichnis Was macht die Funktion COUNT? ...
Fehler MySQL-Tabelle 'performance_schema...Lösung
Die Testumgebung ist mit MariaDB 5.7 eingerichtet...
Implementierung der bidirektionalen Bindung von übergeordneten und untergeordneten Komponentendaten im Front-End-Framework Vue
Inhaltsverzeichnis 1. Einweg-Wertübertragung zwis...
Detaillierte Erklärung der wichtigsten Einzigartigkeit von v-for in Vue
Inhaltsverzeichnis 1. DOM-Diff 2. Fügen Sie Eleme...
Implementierung eines Nginx-Load-Balancing-Clusters
(1) Experimentelle Umgebung youxi1 192.168.5.101 ...