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
Ein kurzer Vortrag über das Klonen von JavaScript
Inhaltsverzeichnis 1. Oberflächliches Klonen 2. T...
Eine kurze Analyse der Verwendung von USING und HAVING in MySQL
Dieser Artikel veranschaulicht anhand von Beispie...
Einführung in Container-Datenvolumes in Docker
Inhaltsverzeichnis Datenvolumen des Docker-Contai...
Vue verwendet Mixins zur Optimierung von Komponenten
Inhaltsverzeichnis Mixins-Implementierung Zusamme...
【Webdesign】Teilen Sie E-WebTemplates exquisite Vorlagen für ausländische Webseiten (FLASH + PSD-Quelldatei + HTML).
Es handelt sich dabei ausschließlich um Webseiten...
Einführung und Verwendung des JS-Beobachtermodus
Inhaltsverzeichnis I. Definition 2. Anwendungssze...
Verwenden Sie in JS nicht mehr überall Operatoren für absolute Gleichheit.
Inhaltsverzeichnis Überblick 1. Test auf Nullwert...
Sprechen Sie darüber, wie HTML-Escapezeichen durch Code identifiziert werden können.
Gelegentlich werden Sie in den Daten Zeichen wie ...
Detaillierter Prozess der Bereitstellung von Docker für WSL2 in IDEA
Die lokale Umgebung ist Windows 10 + WSL2 (Ubuntu...
So veröffentlichen Sie ein lokal erstelltes Docker-Image auf Dockerhub
Heute zeigen wir Ihnen, wie Sie das lokale Docker...
Aktivieren Sie den SSHD-Vorgang im Docker
Installieren Sie zunächst den OpenSSH-Server im D...
Wie man hochwertige Webseiten gestaltet Erfahrung in der Gestaltung hochwertiger Webseiten (Bilder und Text)
Mit der zunehmenden Anzahl offener Plattformen ver...
JS implementiert einfachen Kalendereffekt
In diesem Artikel wird der spezifische JS-Code zu...
Detailliertes Beispiel zur Installation eines FastDfs-Dateiservers mit Docker Compose
docker-compose.yml Version: '2' Leistunge...
HTML 5.1 lernen: 14 neue Features und Anwendungsbeispiele
Vorwort Wie wir alle wissen, gehört HTML5 dem Wor...