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
Zwei Möglichkeiten, mit IIS X-Forwarded-For Header (XFF) aufzurufen, um die tatsächliche IP des Besuchers aufzuzeichnen
Problem: Die über IIS veröffentlichte Website wir...
Zusammenfassung der Methoden zur Verbesserung der MySQL-Anzahl
Ich glaube, dass viele Programmierer mit MySQL ve...
Docker verwendet Nextcloud, um eine private Baidu-Cloud-Festplatte zu erstellen
Plötzlich musste ich einen privaten Dienst für di...
JavaScript-Funktion Currying
Inhaltsverzeichnis 1 Was ist Funktions-Currying? ...
W3C Tutorial (2): W3C Programme
Der W3C-Standardisierungsprozess ist in 7 verschi...
Reines CSS, um nach Auswahl des Produkts das Zeichen √ in der unteren rechten Ecke anzuzeigen
Empfohlene Artikel: Klicken Sie auf die untere re...
7 Interviewfragen zu JS, wie viele können Sie richtig beantworten
Vorwort In JavaScript ist dies der Kontext zum Au...
So stellen Sie eine Datenbank und eine Tabelle aus einer vollständigen MySQL-Datenbanksicherung wieder her
Wie kann ich im offiziellen MySQL-Dump-Tool nur e...
Implementieren von Rechnerfunktionen mit dem WeChat-Applet
Dieser Artikel ist ein einfacher Rechner, der mit...
Problem beim doppelten Laden, wenn die Seite img src enthält
<br />Wenn die Seite <img src=""...
Erkunden Sie die gängigen VMware ESXI CLI-Befehle
Inhaltsverzeichnis 【Allgemeine Befehle】 [Zusammen...
Hilfedokument „MySQL-Lernhinweise“
Systemhilfe anzeigen help contents mysql> Hilf...
CSS3 realisiert den Effekt der kontinuierlichen Dreiecksvergrößerung
1. CSS3-Dreieck vergrößert weiterhin Spezialeffek...
Lösung für den MySQL-Server-Anmeldefehler ERROR 1820 (HY000)
Fehlerseite: Melden Sie sich beim MySQL-Server an...
Drei BOM-Objekte in JavaScript
Inhaltsverzeichnis 1. Standortobjekt 1. URL 2. Ei...