Canvas realisiert die Zeichnung einer rotierenden Windmühle
Dieses Mal zeige ich Ihnen, wie Sie mit Canvas ein rotierendes Windrad zeichnen. Was sind die Vorsichtsmaßnahmen für die Verwendung von Canvas, um ein rotierendes Windrad zu zeichnen?
Vor dem Unterrichten denke ich, dass Sie, wenn Sie schlau sind, die grundlegenden Betriebsmethoden von Canvas beherrschen. Wenn Sie nicht viel über Canvas wissen, empfehle ich Ihnen, zu http://www.w3school zu gehen .com.cn /tags/html_ref_canvas.asp Machen Sie sich zuerst damit vertraut
okey! Das Bild unten zeigt den einfachen Effekt, nachdem wir es abgeschlossen haben. Aktion ist nicht so gut wie Aktion, also machen wir eine einfache Zeichnung!
1. Definieren Sie die Leinwand
Zuerst fügen wir das
DOM-Operation<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body{
padding: 0;
margin: 0;
}
#canvas {
background:#5151a2;
}
</style>
</head>
<body>
<canvas id="canvas" width="800" height="600"></canvas>
</body>
</html> 2. Zeichnen Sie die Basis der Windmühle
<script type="text/javascript">
//获取画布的2d上下文
var ctx = document.getElementById("canvas").getContext("2d");Die Geometrie der Basis der Windmühle sieht aus wie ein langes und schlankes Trapez und dann Füllen Sie es hier mit Farbe. Um relativ gute Ergebnisse zu erzielen, wird die Farbverlaufsfüllmethode verwendet. Schauen Sie sich einfach den Code an~~!
Schauen wir uns den Effekt auf der Seite an. Ist das nicht ganz einfach? (Ich habe das Gefühl, dass ich etwas zu viel rede~!~!) //定义一个函数 ，封装风车的底部基座
function buttom(){
ctx.beginPath(); //开始一条新的绘制路径
var liner = ctx.createLinearGradient(390,600,410,600); //设置变量（颜色渐变的方向-起点-终点）
liner.addColorStop(0,"#ccc"); //设置起点颜色
liner.addColorStop(0.5,"#fff"); //设置中点颜色
liner.addColorStop(1,"#ccc"); //设置终点颜色
ctx.fillStyle = liner; //梯形的填充方式设置为 变量（渐变颜色）
ctx.moveTo(395,300); //提起我们的画笔，起点设置为（395,300）
ctx.lineTo(405,300); //连接起点画线
ctx.lineTo(410,600);
ctx.lineTo(390,600);
ctx.closePath(); //闭合路径
ctx.fill(); //填充梯形
}
buttom(); //要调用函数，才能在浏览器显示3. Blätter zeichnen 
Der nächste Teil wird der kritischste Teil dieser Animation sein. Lassen Sie uns zunächst die Struktur der drei Blätter analysieren und die Form jedes Blattes ist gleich. Und vielleicht haben Sie auch eine im Kopf. Ich habe eine Frage: Soll ich zuerst den Mittelpunkt des Kreises oder zuerst die Blätter zeichnen? Wie soll ich die Form der Blätter zeichnen? Können die Blätter kopiert und eingefügt werden? Die Antwort lautet natürlich: „Lass es uns tun!“ Ideenanalyse:
1) Da die Formen der drei Blätter genau gleich sind, müssen wir nur ein Blatt zeichnen und das zweite und dritte Blatt einfach direkt kopieren Sollten wir nicht eine Funktion für diese Blattzeichnungsmethode kapseln? Nennen Sie es einfach die bind( )-Funktion! ! Rufen Sie es einfach jedes Mal an! Warum! Ihr seid so schlau
2) Die drei Blätter haben einen Mittelpunkt eines Kreises. Um die Koordinatenwerte beim Zeichnen der Blätter zu erleichtern, verschieben wir den Mittelpunkt des Kreises von der oberen linken Ecke die Zeichnung an die Spitze des Trapezes, damit wir die Blätter viel bequemer zeichnen können! Hier wird die Methode Translate() verwendet, um das Koordinatensystem zu verschieben!
3) Der schwierigste Punkt ist zu verstehen, wie die Animation hier implementiert wird, da sich das Animationsprinzip auf die Dokumentstruktur unserer Blattzeichnung auswirkt:
Erstens erstellen wir eine neue Zeichenumgebung . Nennen Sie es Umgebung 1. Wir zeichnen das erste Blatt in Umgebung 1; dann drehen wir es um 120°, um die erste Zeichenumgebung 2 unter der Voraussetzung der ersten Zeichenumgebung zu erstellen, und rufen dann die Funktion bind() auf, um zwei zu zeichnen Blätter; das dritte Blatt wird auf die gleiche Weise gezeichnet, basierend auf Umgebung 2 um 120° gedreht, eine neue Umgebung 3 erstellt und die Blattzeichnungsfunktion bind( ) aufgerufen, um das dritte Blatt zu zeichnen Um eine Animation zu implementieren, müssen wir nur die Zeichenumgebung 1 des ersten Blattes drehen. Das zweite Blatt und das dritte Blatt werden in Bezug auf Umgebung 1 gezeichnet. Bewegen sie sich auch? ? Sperrfeuer: 666666
4) und schließlich einige grundlegende Fehlerbehebungen im Erscheinungsbildstil! Wie Farbverlauf, Transparenz usw.!
Blätter zeichnenAls ich diese Blattform gezeichnet habe, habe ich sie langsam angepasst, verzeihen Sie mir. Ich kann solche Blätter natürlich nur nach ihren eigenen Vorlieben zeichnen, aber die allgemeine Idee ist dieselbe.
Hier deklariere ich eine Variable var num = 0;, als Umgebung 1 Rotation Ein Parameter der Gradänderung: Schauen wir uns dann den Code direkt an! ! !var num =0;
function yezi(){
ctx.save(); //保存默认情况下的canvas变换状态
ctx.beginPath();
ctx.translate(400,300);
// ctx.globalAlpha = 0.9;
// 设置第一次状态下 坐标系旋转度数
ctx.rotate((Math.PI/180)*num);
var liner1 = ctx.createLinearGradient(30,-12,30,12); //这里设置颜色渐变填充的样式
liner1.addColorStop(0,"#ccc");
liner1.addColorStop(0.5,"#fff");
liner1.addColorStop(1,"#ccc");
ctx.fillStyle = liner1;
ctx.save(); //保存第一次状态 平移坐标系变换
ctx.beginPath();
bind(); //调用函数
//绘制第二片叶子
ctx.beginPath();
ctx.rotate((Math.PI/180)*120); //坐标系旋转120°
ctx.save(); //保存旋转坐标系状态，为第三片叶子做铺垫
bind(); //调用函数
//绘制第三片叶子
ctx.beginPath();
ctx.rotate((Math.PI/180)*120); //坐标系旋转120°
ctx.save();
bind(); //调用函数
ctx.restore(); //回复第3次状态前（旋转坐标系）
ctx.restore(); //回复第2次状态前（旋转坐标系）
//绘制叶子中心圆圈
ctx.beginPath();
var arcgradient = ctx.createRadialGradient(0,0,0,0,0,16);
arcgradient.addColorStop(0,"#ccc");
arcgradient.addColorStop(0.1,"#fff");
arcgradient.addColorStop(1,"#ccc");
ctx.arc(0,0,10,0,Math.PI*2);
ctx.fillStyle = arcgradient;
ctx.fill();
ctx.restore(); //回复第1次状态前（平移坐标系）
num+=5; //第一状下 环境1 态坐标系旋转度数增加********************************这个num使得环境1的旋转角度在不停的变化，**********************************************
ctx.restore();
}
//绘制每片叶子都重复的代码，这里做一个函数包装
function bind(){
ctx.moveTo(0,0);
ctx.quadraticCurveTo(10,-12,30,-12); //比赛尔曲线
ctx.lineTo(190,-3);
ctx.quadraticCurveTo(200,0,190,3);
ctx.lineTo(30,12);
ctx.moveTo(0,0);
ctx.quadraticCurveTo(10,12,30,12);
ctx.fill();
}4、设置动画
动画这部分就比较简单了，设置定时器，清除画布，调用函数；大功告成，打完收工！！！
setInterval(function(){
ctx.clearRect(0,0,800,600); //每次执行代码前，都要将画布清空，不然画出的图形会滞留在画布上；
buttom(); //调用函数
yezi();
},50);相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
Das obige ist der detaillierte Inhalt vonCanvas realisiert die Zeichnung einer rotierenden Windmühle. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
Kann der Grundriss direkt im Architektur-PPT gezeichnet werden?
Mar 20, 2024 am 08:43 AM
ppt wird in vielen Bereichen und Berufen häufig verwendet, insbesondere in der Bildung, Architektur usw. Wenn es um Architektur-PPT geht, müssen wir zunächst an die Präsentation einiger Architekturzeichnungen denken. Wenn wir keine professionelle Zeichensoftware verwenden, können wir dann direkt einen einfachen Architekturplan zeichnen? Tatsächlich können wir den Vorgang hier abschließen. Im Folgenden werden wir einen relativ einfachen Grundriss zeichnen, um Ihnen eine Vorstellung zu geben. Ich hoffe, dass Sie auf der Grundlage dieser Idee bessere Grundrisszeichnungen erstellen können. 1. Zuerst doppelklicken wir, um die PPT-Software auf dem Desktop zu öffnen, und klicken, um ein neues leeres Präsentationsdokument zu erstellen. 2. Wir finden Einfügen→Form→Rechteck in der Menüleiste. 3. Nachdem Sie das Rechteck gezeichnet haben, doppelklicken Sie auf die Grafik und ändern Sie den Füllfarbentyp. Hier können wir ändern
So zeichnen Sie mit Python ein geografisches 3D-Diagramm
Sep 28, 2023 am 10:19 AM
Überblick über das Zeichnen von geografischen 3D-Diagrammen mit Python: Das Zeichnen von geografischen 3D-Diagrammen kann uns dabei helfen, geografische Daten und die räumliche Verteilung intuitiver zu verstehen. Als leistungsstarke und benutzerfreundliche Programmiersprache bietet Python viele Bibliotheken und Tools, mit denen sich verschiedene Arten von geografischen Diagrammen zeichnen lassen. In diesem Artikel erfahren Sie, wie Sie mit der Programmiersprache Python und einigen beliebten Bibliotheken wie Matplotlib und Basemap 3D-Geokarten zeichnen. Vorbereitung der Umgebung: Bevor wir beginnen, müssen wir uns vergewissern
Welche Versionen von html2canvas gibt es?
Aug 22, 2023 pm 05:58 PM
Zu den Versionen von html2canvas gehören html2canvas v0.x, html2canvas v1.x usw. Detaillierte Einführung: 1. html2canvas v0.x, eine frühe Version von html2canvas. Die neueste stabile Version ist v0.5.0-alpha1. Es handelt sich um eine ausgereifte Version, die in vielen Projekten weit verbreitet und verifiziert wurde. 2. html2canvas v1.x, dies ist eine neue Version von html2canvas.
Lernen Sie in fünf Minuten, Dendrogramme und Radardiagramme in Python zu zeichnen
Sep 27, 2023 pm 12:48 PM
Lernen Sie in fünf Minuten, Dendrogramme und Radardiagramme mit Python zu zeichnen. Bei der Datenvisualisierung sind Dendrogramme und Radardiagramme zwei häufig verwendete Diagrammformen. Baumkarten werden zur Darstellung hierarchischer Strukturen verwendet, während Radardiagramme zum Vergleich von Daten über mehrere Dimensionen hinweg verwendet werden. In diesem Artikel wird erläutert, wie diese beiden Diagramme mit Python gezeichnet werden, und es werden spezifische Codebeispiele bereitgestellt. 1. Dendrogramme zeichnen Es gibt in Python mehrere Bibliotheken, die zum Zeichnen von Dendrogrammen verwendet werden können, z. B. Matplotlib und Graphviz. Im Folgenden wird die Matplotlib-Bibliothek als Beispiel zur Demonstration verwendet
Lernen Sie das Canvas-Framework kennen und erklären Sie das häufig verwendete Canvas-Framework im Detail
Jan 17, 2024 am 11:03 AM
Entdecken Sie das Canvas-Framework: Um die häufig verwendeten Canvas-Frameworks zu verstehen, sind spezifische Codebeispiele erforderlich. Einführung: Canvas ist eine in HTML5 bereitgestellte Zeichen-API, mit der wir umfangreiche Grafik- und Animationseffekte erzielen können. Um die Effizienz und den Komfort des Zeichnens zu verbessern, haben viele Entwickler verschiedene Canvas-Frameworks entwickelt. In diesem Artikel werden einige häufig verwendete Canvas-Frameworks vorgestellt und spezifische Codebeispiele bereitgestellt, um den Lesern ein tieferes Verständnis für die Verwendung dieser Frameworks zu vermitteln. 1. EaselJS-Framework Ea
uniapp implementiert die Verwendung von Canvas zum Zeichnen von Diagrammen und Animationseffekten
Oct 18, 2023 am 10:42 AM
Für die Verwendung von Canvas zum Zeichnen von Diagrammen und Animationseffekten in Uniapp sind bestimmte Codebeispiele erforderlich. 1. Einführung Mit der Beliebtheit mobiler Geräte müssen immer mehr Anwendungen verschiedene Diagramme und Animationseffekte auf dem mobilen Endgerät anzeigen. Als plattformübergreifendes Entwicklungsframework auf Basis von Vue.js bietet uniapp die Möglichkeit, Canvas zum Zeichnen von Diagrammen und Animationseffekten zu verwenden. In diesem Artikel wird vorgestellt, wie Uniapp Canvas verwendet, um Diagramm- und Animationseffekte zu erzielen, und es werden spezifische Codebeispiele gegeben. 2. Leinwand
So zeichnen Sie animierte Diagramme mit Python
Sep 27, 2023 am 09:53 AM
So zeichnen Sie animierte Diagramme mit Python Python ist eine leistungsstarke Programmiersprache, die für verschiedene Datenvisualisierungen und Diagrammzeichnungen verwendet werden kann. Unter anderem kann das Zeichnen animierter Diagramme die Daten anschaulicher und interessanter machen. In diesem Artikel wird erläutert, wie Sie mit Python animierte Diagramme zeichnen, und es werden spezifische Codebeispiele bereitgestellt. Zuerst müssen wir die Matplotlib-Bibliothek installieren, eine der am häufigsten verwendeten Diagrammbibliotheken in Python. Führen Sie im Terminal den folgenden Befehl aus, um matplotlib zu installieren: pipinsta
Lernen Sie in drei Minuten, wie Sie mit Python Liniendiagramme, Balkendiagramme und Kreisdiagramme zeichnen
Sep 27, 2023 am 09:29 AM
Lernen Sie in drei Minuten, Liniendiagramme, Balkendiagramme und Kreisdiagramme mit Python zu zeichnen. Python ist eine sehr beliebte Programmiersprache, die häufig in der Datenanalyse und -visualisierung verwendet wird. In diesem Artikel erfahren Sie, wie Sie mit Python drei gängige Diagrammtypen zeichnen: Liniendiagramme, Balkendiagramme und Kreisdiagramme. Ich stelle Ihnen konkrete Codebeispiele zur Verfügung, damit Sie schnell loslegen können. Liniendiagramm Ein Liniendiagramm ist eine Art Diagramm, das Trendänderungen durch die Verbindung von Datenpunkten anzeigt. In Python können wir die Matplotlib-Bibliothek zum Plotten verwenden
