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
HTML verwendet Canvas, um die Bullet-Screen-Funktion zu implementieren
Einführung Kürzlich musste ich für einen großen A...
Wie lädt Vue Dateien mit unterschiedlichem Ursprung basierend auf der URL herunter?
Im Allgemeinen können wir beim Herunterladen von ...
Ist Ihre Website für IE8 geeignet?
Während der Olympischen Spiele wird IE 8 Beta 2 ve...
Vue kapselt die öffentliche Funktionsmethode zum Exportieren von Excel-Daten
vue+element UI kapselt eine öffentliche Funktion ...
Tutorial zur Installation und Konfiguration von MySQL für Mac
In diesem Artikel finden Sie das MySQL-Installati...
Eine kurze Diskussion über die Ausführungsdetails der Mysql Multi-Table Join-Abfrage
Erstellen Sie zunächst die Falldemonstrationstabe...
6 Vererbungsmethoden von JS Advanced ES6
Inhaltsverzeichnis 1. Vererbung der Prototypkette...
Zusammenfassung der Fallstricke bei der Installation von MySQL und MySQLClient auf CentOS7
1. MySQL Yum-Repository hinzufügen Offizielle MyS...
So verwenden Sie JSX zum Implementieren von Karussellkomponenten (Front-End-Komponentenbildung)
Bevor wir JSX zum Erstellen eines Komponentensyst...
html öffnet ein neues Fenster mit einem Hyperlink und kann Fenstereigenschaften steuern
1. Die Größe des durch den HTML-Hyperlink geöffne...
Erläuterung des MySQL-Nicht-Null-Einschränkungsfalls
Inhaltsverzeichnis Legen Sie beim Erstellen einer...
Schritte zum Ausführen von ASP.NET Core im Docker-Container
Es gibt in letzter Zeit zu viel Wissen zu lernen,...
Detaillierte Erklärung der Requisiten und Kontextparameter der SetUp-Funktion in Vue3
1. Der erste Parameter props der setUp-Funktion s...
So legen Sie den Fokus auf HTML-Elemente fest
Code kopieren Der Code lautet wie folgt: <Körp...
Verwenden von React+Redux zum Implementieren der Zählerfunktion und aufgetretene Probleme
Redux ist ein einfacher Statusmanager. Wir werden...