Heim >Web-Frontend >H5-Tutorial >Super-Strategie zum Zeichnen von Rechtecken mit HTML5 Canvas API_html5-Tutorial-Tipps

Super-Strategie zum Zeichnen von Rechtecken mit HTML5 Canvas API_html5-Tutorial-Tipps

WBOYOriginal: 2016-05-16 15:45:351939Durchsuche

Verwenden Sie closePath(), um die Form zu schließen
Zuerst zeichnen wir ein Rechteck mit der gebräuchlichsten Methode.

JavaScript-CodeInhalt in die Zwischenablage kopieren

"en">
"UTF-8">
"zh">
"UTF-8">
绘制矩形
"canvas-warp">
"canvas" style="border: 1px solid #aaaaaa; display: block; margin: 50px auto ;">
你的浏览器居然不支持Canvas？！赶快换一个吧！！

<script> </span></li> <li> <span> window.onload = </span><span class="keyword">Funktion</span><span>(){ </span> </li> <li class="alt"> <span> </span><span class="keyword">var</span><span> canvas = document.getElementById(</span><span class="string">"canvas"</span><span>); </span> </li> <li><span> canvas.width = 800; </span></li> <li class="alt"><span> canvas.height = 600; </span></li> <li> <span> </span><span class="keyword">var</span><span> context = canvas.getContext(</span><span class="string">"2d"</span><span>); </span> </li> <li class="alt"><span> </span></li> <li><span> context.beginPath(); </span></li> <li class="alt"><span> context.moveTo(150,50); </span></li> <li><span> context.lineTo(650,50); </span></li> <li class="alt"><span> context.lineTo(650,550); </span></li> <li><span> context.lineTo(150,550); </span></li> <li class="alt"> <span> context.lineTo(150,50); </span><span class="comment">//绘制最后一笔使图像闭合 </span><span> </span> </li> <li><span> context.lineWidth = 5; </span></li> <li class="alt"> <span> context.streichstil = </span><span class="string">"schwarz"</span><span>; </span> </li> <li><span> context.Stroke(); </span></li> <li class="alt"><span> </span></li> <li><span> } </span></li> <li class="alt"><span></script>

Laufergebnis:
2016321105129852.jpg (850×500)

Auf den ersten Blick ist daran nichts auszusetzen, aber Kinderschuhe mit gutem Sehvermögen haben festgestellt, dass es beim Schließen des letzten Strichs ein Problem gibt, was zu einer Lücke in der oberen linken Ecke führt. Diese Situation wird durch die Einstellung von lineWidth verursacht. Wenn der Standardwert 1 Strich ist, gibt es kein Problem. Aber je größer die Striche und je breiter die Linien, desto deutlicher wird diese Lücke. Wie kann man diese Situation vermeiden?
Der Titel hat es bereits verraten. Verwenden Sie „clothPath()“, um die Form zu schließen.

JavaScript-CodeInhalt in die Zwischenablage kopieren

"zh">
"UTF-8"
> Zeichne ein Rechteck
"canvas-warp">
style="border: 1px solid #aaaaaa; display: block; margin: 50px auto ;">
Ihr Browser unterstützt Canvas nicht? ! Ändere es schnell! !

<script> <span></span> window.onload = </li> <li>function<span></span>(){ </li> <li class="alt"> <span></span> </li> <li>var<span></span> canvas = document.getElementById(</li> <li class="alt">"canvas"<span></span>); <span class="keyword"></span> <span></span> canvas.width = 800; </li> <li> <span></span>canvas.height = 600;<span class="keyword"></span> <span></span> <span class="string"></span>var<span></span> context = canvas.getContext(</li> <li class="alt">"2d"<span></span> </li> <li> <span></span> </li> <li class="alt"> <span></span> context.beginPath(); <span class="keyword"></span> <span></span> context.moveTo(150,50); <span class="string"></span> <span></span> context.lineTo(650,50); </li> <li> <span></span> context.lineTo(650,550); </li> <li class="alt"> <span></span> context.lineTo(150,550); </li> <li> <span></span> context.lineTo(150,50); </li> <li class="alt">//Sie müssen nicht den letzten Strich zeichnen <span></span> </li> <li> <span></span> context.closePath(); </li> <li class="alt">//Verwenden Sie closePath(), um die Grafik zu schließen <span></span> </li> <li> <span></span> <span class="comment"></span> <span></span> context.lineWidth = 5; </li> <li class="alt"> <span></span> context.StrokeStyle = <span class="comment"></span>"black"<span></span>; </li> <li> context.Stroke(); <span></span> </li> <li class="alt"> <span></span> </li> <li> } <span></span> <span class="string"></span></script>

Laufergebnis:
2016321105204703.jpg (850×500)

In diesem Beispiel wissen wir in Kombination mit der Erklärung in der vorherigen Lektion, dass wir beim Zeichnen eines Pfads den geplanten Pfad mit beginPath() und closePath() umschließen müssen. Natürlich müssen Sie nicht den letzten Strich zeichnen, sondern verwenden Sie einfach closePath() direkt und es wird automatisch für Sie geschlossen. (Wenn Sie also keine geschlossene Form zeichnen möchten, können Sie closePath() nicht verwenden)

Färben Sie das Rechteck ein
Hier stellen wir eine Methode fill() vor, die genauso wichtig ist wie Stroke(). Genau wie beim ursprünglichen Strich müssen wir vor dem Füllen zunächst das Attribut fillStyle verwenden, um die zu füllende Farbe auszuwählen.
Wenn wir beispielsweise das Rechteck darüber gelb einfärben möchten, können wir es so schreiben.

JavaScript-CodeInhalt in die Zwischenablage kopieren

"zh">
"UTF-8">
绘制矩形
"canvas-warp">
你的浏览器居然不支持Canvas？！赶快换一个吧！！

<script> </span></li> <li class="alt"> <span> window.onload = </span><span class="keyword">Funktion</span><span>(){ </span> </li> <li> <span> </span><span class="keyword">var</span><span> canvas = document.getElementById(</span><span class="string">"canvas"</span><span>); </span> </li> <li class="alt"><span> canvas.width = 800; </span></li> <li><span> canvas.height = 600; </span></li> <li class="alt"> <span> </span><span class="keyword">var</span><span> context = canvas.getContext(</span><span class="string">"2d"</span><span>); </span> </li> <li><span> </span></li> <li class="alt"><span> context.beginPath(); </span></li> <li><span> context.moveTo(150,50); </span></li> <li class="alt"><span> context.lineTo(650,50); </span></li> <li><span> context.lineTo(650,550); </span></li> <li class="alt"><span> context.lineTo(150,550); </span></li> <li> <span> context.lineTo(150,50); </span><span class="comment">//最后一笔可以不画 </span><span> </span> </li> <li class="alt"> <span> context.closePath(); </span><span class="comment">//使用closePath()闭合图形 </span><span> </span> </li> <li><span> </span></li> <li class="alt"> <span> context.fillStyle = </span><span class="string">"gelb"</span><span>; </span><span class="comment">//选择油漆桶的颜色 </span><span> </span> </li> <li><span> context.lineWidth = 5; </span></li> <li class="alt"> <span> context.streichstil = </span><span class="string">"schwarz"</span><span>; </span> </li> <li><span> </span></li> <li class="alt"> <span> context.fill(); </span><span class="comment">//确定填充 </span><span> </span> </li> <li><span> context.Stroke(); </span></li> <li class="alt"><span> </span></li> <li><span> } </span></li> <li class="alt"><span></script>

Laufergebnis:
2016321105516457.jpg (850×500)

Was hier beachtet werden muss, ist eine gute Codierungspraxis. Denn wie bereits erwähnt, handelt es sich bei Canvas um ein zustandsbasiertes Zeichnen, und das Zeichnen wird nur bestimmt, wenn Stroke() und Fill() aufgerufen werden. Deshalb werden wir diese beiden Codezeilen am Ende einfügen und den Rest des Statuseinstellungscodes davor platzieren, um die Statuseinstellung von dem Code zu trennen, der die Auslosung bestimmt. Verbessern Sie die Lesbarkeit des Codes.

Gekapselte Zeichenmethode
Sie müssen herausgefunden haben, dass das Zeichnen eines Rechtecks tatsächlich vier Striche wie diesen erfordert. Jedes Mal, wenn wir diese dumme Methode zum Zeichnen eines Rechtecks verwenden, müssen wir diese zeichnen vier Striche. Wie viel Aufwand wäre es, wenn wir 10 Rechtecke ausgeben müssten? 100? 1.000? Wenn der Code so geschrieben wird, wird er aufgebläht und die Wiederverwendbarkeit ist sehr gering. Hier können wir JavaScript verwenden, um diese Methoden zu kapseln. Wir wissen, dass ein Rechteck durch die Koordinaten seiner oberen linken Ecke sowie seiner Länge und Breite eindeutig bestimmt werden kann.
JavaScript-Funktion
Hier stellen wir JavaScript-Funktionen vor. Wenn Sie über Grundkenntnisse verfügen, können Sie diesen Abschnitt überspringen und direkt mit den folgenden Abschnitten fortfahren.
Funktionsdeklarationsaufrufe in den Sprachen JavaScript und ActionScript sind die einfachsten unter den Programmiersprachen.
Die Rolle der Funktion
Die Rolle der Funktion besteht darin, Code einmal zu schreiben und diesen Code dann wiederholt wiederzuverwenden. Zum Beispiel: Wir möchten die Funktion mehrerer Summensätze vervollständigen.

JavaScript-CodeInhalt in die Zwischenablage kopieren

var Summe
Summe = 3 2;
Alarm(Summe);
sum=7 8 ;
Alarm(Summe);
.... //Zwei Codezeilen wiederholen

Wenn Sie die Summe von 8 Zahlengruppen implementieren möchten, benötigen Sie 16 Codezeilen. Je mehr Sie implementieren, desto mehr Codezeilen benötigen Sie. Daher können wir den Codeblock, der eine bestimmte Funktion ausführt, in eine Funktion einfügen und diese Funktion direkt aufrufen, wodurch wir uns die Mühe ersparen, wiederholt eine große Menge Code einzugeben.
Verwenden Sie Funktionen zum Vervollständigen:

JavaScript-CodeInhalt in die Zwischenablage kopieren

Funktion add2(a,b){
sum = a b;
Warnung(Summe);
} // Sie müssen es nur einmal schreiben
add2(3,2);
add2(7,8);
.... //Rufen Sie einfach die Funktion auf

Funktion definieren
Wie definiere ich eine Funktion? Schauen Sie sich das folgende Format an:

JavaScript-CodeInhalt in die Zwischenablage kopieren

Funktion Funktionsname ( )
{
Funktionskörper
}

Funktion ist das Schlüsselwort, das eine Funktion definiert, „Funktionsname“ ist der Name, den Sie der Funktion geben, und „Funktionskörper“ wird durch den Code ersetzt, der die spezifische Funktion vervollständigt.
Funktionsaufruf
Nachdem eine Funktion definiert wurde, kann sie nicht automatisch ausgeführt werden. Sie müssen sie aufrufen und den Funktionsnamen direkt an der erforderlichen Position schreiben. Im Allgemeinen gibt es zwei Möglichkeiten:

Fall 1: Wird innerhalb des <script>-Tags aufgerufen. </p> <div class="codeText"> <div class="codeHead"> <span class="lantxt">JavaScript-Code</span><span style="CURSOR: pointer" class="copyCodeText" onclick="copyIdText('code_6911')">Inhalt in die Zwischenablage kopieren</span> </div> <div id="code_6911"> <ol class="dp-c"> <li class="alt"><span><span><script> </span></span></li> <li> <span></span><span class="keyword">Funktion</span><span> tcon() </span> </li> <li class="alt"><span>{ </span></li> <li> <span>alarm(</span><span class="string">"Herzlichen Glückwunsch zum Erlernen des Funktionsaufrufs!"</span><span>); </span> </li> <li class="alt"><span>} </span></li> <li> <span>tcon(); </span><span class="comment">//Rufen Sie die Funktion auf und schreiben Sie den Funktionsnamen direkt. </span><span> </span> </li> <li class="alt"><span></script>

Zweiter Fall: Wird in einer HTML-Datei aufgerufen, z. B. beim Aufrufen einer definierten Funktion nach dem Klicken auf eine Schaltfläche.

Diese Situation wird später verwendet.
Die Funktion
mit Parametern hat das folgende Format:

JavaScript-CodeInhalt in die Zwischenablage kopieren

Funktion Funktionsname (Parameter 1, Parameter 2)
{
Funktionscode
}

Hinweis: Es können mehrere Parameter vorhanden sein. Erhöhen oder verringern Sie die Anzahl der Parameter nach Bedarf. Parameter werden durch (Komma,) getrennt.
Gemäß diesem Format sollte die Funktion zum Implementieren der Summe zweier beliebiger Zahlen wie folgt geschrieben werden:

JavaScript-CodeInhalt in die Zwischenablage kopieren

Funktion add2(x,y)
{
sum = x y;
document.write(sum);
}

x und y sind die beiden Parameter der Funktion. Beim Aufruf der Funktion können wir über diese beiden Parameter die beiden tatsächlichen Addenden an die Funktion übergeben.
Add2(3,4) ermittelt beispielsweise die Summe von 3 4 und add2(60,20) ermittelt die Summe von 60 und 20.
Rückgabewertfunktion

JavaScript-CodeInhalt in die Zwischenablage kopieren

Funktion add2(x,y)
{
sum = x y;
return sum //Funktionswert zurückgeben, der Wert nach der Rückgabe wird als Rückgabewert bezeichnet.
}

Die Rückgabe ist hier dieselbe wie in anderen Sprachen, aber in schwach typisierten Sprachen wie JS oder AS muss der Rückgabewerttyp nicht in die Funktionsdeklaration geschrieben werden.

An dieser Stelle haben wir auch systematisch über JavaScript-Funktionen gesprochen. Kehren wir zum Thema zurück~
Wir können unser Rechteck auch kapseln, der Code lautet wie folgt:

JavaScript-CodeInhalt in die Zwischenablage kopieren

"zh">
"UTF-8">
封装绘制矩形方法
"canvas-warp">
你的浏览器居然不支持Canvas？！赶快换一个吧！！

<script> </span></li> <li class="alt"> <span> window.onload = </span><span class="keyword">Funktion</span><span>(){ </span> </li> <li> <span> </span><span class="keyword">var</span><span> canvas = document.getElementById(</span><span class="string">"canvas"</span><span>); </span> </li> <li class="alt"><span> canvas.width = 800; </span></li> <li><span> canvas.height = 600; </span></li> <li class="alt"> <span> </span><span class="keyword">var</span><span> context = canvas.getContext(</span><span class="string">"2d"</span><span>); </span> </li> <li><span> </span></li> <li class="alt"> <span> drawRect(context, 150, 50, 50, 50, </span><span class="string">"red"</span><span>, 5, </span><span class="string">"blue"</span><span>); </span> </li> <li> <span> drawRect(context, 250, 50, 50, 50, </span><span class="string">"green"</span><span>, 5, </span><span class="string">"red"</span><span>); </span> </li> <li class="alt"> <span> drawRect(context, 350, 50, 50, 50, </span><span class="string">"gelb"</span><span>, 5, </span><span class="string">"schwarz"</span><span>); </span> </li> <li><span> } </span></li> <li class="alt"><span> </span></li> <li> <span> </span><span class="keyword">Funktion</span><span> drawRect(cxt, x, y, width, height, fillColor, borderWidth, borderColor){ </span> </li> <li class="alt"><span> cxt.beginPath(); </span></li> <li><span> cxt.moveTo(x, y); </span></li> <li class="alt"><span> cxt.lineTo(x width, y); </span></li> <li><span> cxt.lineTo(x width, y height); </span></li> <li class="alt"><span> cxt.lineTo(x, y height); </span></li> <li><span> cxt.lineTo(x, y); </span></li> <li class="alt"><span> cxt.closePath(); </span></li> <li><span> </span></li> <li class="alt"><span> cxt.lineWidth = borderWidth; </span></li> <li><span> cxt.StrokeStyle = borderColor; </span></li> <li class="alt"><span> cxt.fillStyle = fillColor; </span></li> <li><span> </span></li> <li class="alt"><span> cxt.fill(); </span></li> <li><span> cxt.Stroke(); </span></li> <li class="alt"><span> } </span></li> <li><span></script>

运行结果：

使用rect()方法绘制矩形
犹豫绘制矩形是常用的方法,所以在Canvas Sie haben die Funktion „rect()“ verwendet方法接收4个参数x, y, width, height，实际调用时也就是

JavaScript-Code复制内容到剪贴板

context.rect(x,y,width,height);

Auf dieser Grundlage optimieren wir jetzt die Kapselungsmethode.

JavaScript-CodeInhalt in die Zwischenablage kopieren

Funktion drawRect(cxt, x, y, width, height, fillColor, borderWidth, borderColor){
cxt.beginPath();
cxt.rect(x, y, width, height);
//cxt.closePath(); Sie brauchen closePath() nicht
cxt.lineWidth = borderWidth;
cxt.fillStyle = fillColor;
Rufen Sie die Kapselungsmethode auf und zeichnen Sie ein magisches Bild

Erstellen Sie ein magisches Bild~

Okay, nutzen wir es, um Operationen durchzuführen, unsere Hände zu üben und die Muskeln und Knochen zu bewegen, so wie wir es gerade verpackt haben.

2016321105759647.jpg (500×375)

JavaScript-Code

Inhalt in die Zwischenablage kopieren

"zh">
"UTF-8">
绘制魔性图形
"canvas-warp">
你的浏览器居然不支持Canvas？！赶快换一个吧！！

<script> </span></li> <li class="alt"> <span> window.onload = </span><span class="keyword">Funktion</span><span>(){ </span> </li> <li> <span> </span><span class="keyword">var</span><span> canvas = document.getElementById(</span><span class="string">"canvas"</span><span>); </span> </li> <li class="alt"><span> canvas.width = 800; </span></li> <li><span> canvas.height = 600; </span></li> <li class="alt"> <span> </span><span class="keyword">var</span><span> context = canvas.getContext(</span><span class="string">"2d"</span><span>); </span> </li> <li><span> </span></li> <li class="alt"><span> context.beginPath(); </span></li> <li><span> context.rect(0, 0, 800, 600); </span></li> <li class="alt"> <span> context.fillStyle = </span><span class="string">"#AA9033"</span><span>; </span> </li> <li><span> </span></li> <li class="alt"><span> context.fill(); </span></li> <li><span> </span></li> <li class="alt"><span> context.beginPath(); </span></li> <li> <span> </span><span class="keyword">for</span><span>(</span><span class="keyword">var</span><span> i=0; i<=20; i ){ </span> </li> <li class="alt"><span> drawWhiteRect(context, 200 10 * i, 100 10 * i, 400 - 20 * i, 400 - 20 * i); </span></li> <li><span> drawBlackRect(context, 205 10 * i, 105 10 * i, 390 - 20 * i, 390 - 20 * i); </span></li> <li class="alt"><span> } </span></li> <li><span> </span></li> <li class="alt"><span> context.beginPath(); </span></li> <li><span> context.rect(395, 295, 5, 5); </span></li> <li class="alt"> <span> context.fillStyle = </span><span class="string">"black"</span><span>; </span> </li> <li><span> context.lineWidth = 5; </span></li> <li class="alt"><span> </span></li> <li><span> context.fill(); </span></li> <li class="alt"><span> context.Stroke(); </span></li> <li><span> } </span></li> <li class="alt"><span> </span></li> <li> <span> </span><span class="keyword">Funktion</span><span> drawBlackRect(cxt, x, y, width, height){ </span> </li> <li class="alt"><span> cxt.beginPath(); </span></li> <li><span> cxt.rect(x, y, width, height); </span></li> <li class="alt"><span> </span></li> <li><span> cxt.lineWidth = 5; </span></li> <li class="alt"> <span> cxt.streichstil = </span><span class="string">"schwarz"</span><span>; </span> </li> <li><span> </span></li> <li class="alt"><span> cxt.Stroke(); </span></li> <li><span> }</span></li> <li class="alt"><span> </span></li> <li> <span> </span><span class="keyword">Funktion</span><span> drawWhiteRect(cxt, x, y, width, height){ </span> </li> <li class="alt"><span> cxt.beginPath(); </span></li> <li><span> cxt.rect(x, y, width, height); </span></li> <li class="alt"><span> </span></li> <li><span> cxt.lineWidth = 5; </span></li> <li class="alt"> <span> cxt.StrokeStyle = </span><span class="string">"white"</span><span>; </span> </li> <li><span> </span></li> cxt.stroke(); <li class="alt"><span> </span></li> } <li><span> </span></li></script>

Laufergebnis:

2016321105841741.jpg (850×500) Ist es nicht sehr magisch? Ist es nicht sehr cool? Ich werde mir nicht die Zeit nehmen, diesen Code zu erklären. Sie können nach dem Unterricht darüber nachdenken oder versuchen, das gelernte Wissen zu nutzen, um ein cooles Bild zu zeichnen. Diese Lektion hat viel Inhalt. Tatsächlich werden nur vier Eigenschaften und Methoden vorgestellt – closePath(), fillStyle, fill(), rect() und eine erweiterte JavaScript-Funktionserklärung.

Canvas erzielt einen Bildeffekt mit abgerundeten Ecken

Diese Regel gilt für regelmäßige oder unregelmäßige Grafiken, die von verschiedenen Canvas gezeichnet werden.
Der Schlüssel zum Erreichen abgerundeter Ecken in Canvas ist die Verwendung von „Texturfüllung“.

Es gibt eine Methode namens createPattern in Canvas, die Bildelemente bekannter Größe in Texturobjekte zum Füllen umwandeln kann.

Wenn Sie beispielsweise den kreisförmigen Effekt eines Bildes namens test.jpg mit einer Größe von 100 Pixel * 100 Pixel implementieren, lautet der Haupt-JS-Code wie folgt:

JavaScript-Code

Inhalt in die Zwischenablage kopieren

// Leinwandelement, Bildelement
var canvas = document.querySelector("#canvas"), image = neuBild();
var context = canvas.getContext("2d");
image.onload =
() {
pattern = context.createPattern(image, "no-repeat");
context.arc(50, 50, 50, 0, 2 * Math.PI);
context.fillStyle = Muster
context.fill();
};
image.src =
;
Machen Sie einfach den FillStyle-Attributwert des Canvas-Kontexts gleich diesem Texturobjekt.

Die mit Canvas gelieferte API zum Zeichnen von Rechtecken verfügt nicht über Attribute für abgerundete Ecken. Daher verwendet das abgerundete Rechteck in der Demo eine benutzerdefinierte Methode. Ich warf einen kurzen Blick darauf und stellte fest, dass es etwas umständlich war, unterschiedliche Filetgrößen in vertikaler und horizontaler Richtung zu erzielen. Zur Demonstration habe ich mir keine großen Mühen gemacht, daher waren die Filets in der Demo symmetrisch.

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：HTML5 implementiert mehrere Bild-Upload-Funktionen. HTML5-Tutorial-FähigkeitenNächster Artikel：HTML5 implementiert mehrere Bild-Upload-Funktionen. HTML5-Tutorial-Fähigkeiten

In Verbindung stehende Artikel

Mehr sehen