Grundlegendes Tutorial zum Zeichnen von Text und Bildern in HTML5 Canvas_html5-Tutorial-Fähigkeiten

Text zeichnen

In HTML5 können wir den benötigten Text auch auf der Leinwand „Leinwand“ zeichnen. Die wichtigsten Eigenschaften und Methoden des beteiligten CanvasRenderingContext2D-Objekts sind wie folgt:

属性或方法	基本描述
font	设置绘制文字所使用的字体，例如20px 宋体，默认值为10px sans-serif。该属性的用法与css font属性一致，例如italic bold 14px/30px Arial,宋体
fillStyle	用于设置画笔填充路径内部的颜色、渐变和模式。该属性的值可以是一个表示CSS颜色值的字符串。如果你的绘制需求比较复杂，该属性的值还可以是一个CanvasGradient对象或者CanvasPattern对象
strokeStyle	用于设置画笔绘制路径的颜色、渐变和模式。该属性的值可以是一个表示CSS颜色值的字符串。如果你的绘制需求比较复杂，该属性的值还可以是一个CanvasGradient对象或者CanvasPattern对象
fillText(string text, int x, int y[, int maxWidth])	从指定坐标点位置开始绘制填充的文本文字。参数maxWidth是可选的，如果文本内容宽度超过该参数设置，则会自动按比例缩小字体以适应宽度。与本方法对应的样式设置属性为fillStyle。
strokeText(string text, int x, int y[, int maxWidth])	从指定坐标点位置开始绘制非填充的文本文字(文字内部是空心的)。参数maxWidth是可选的，如果文本内容宽度超过该参数设置，则会自动按比例缩小字体以适应宽度。该方法与fillText()用法一致，不过strokeText()绘制的文字内部是非填充(空心)的，fillText()绘制的文字是内部填充(实心)的。与本方法对应的样式设置属性为strokeStyle。

Aus den obigen API-Beschreibungsinformationen können wir ersehen, dass es zwei Möglichkeiten gibt, Text in Canvas zu zeichnen: Eine besteht darin, fillText() fillStyle zu verwenden, um gefüllten (durchgezogenen) Text zu zeichnen, und die andere darin, StrokeText() zu verwenden, um zu zeichnen nicht ausgefüllter (hohler) Text.

Als nächstes schauen wir uns an, wie man Canvas zum Zeichnen von Volltext verwendet. Der spezifische HTML-Code lautet wie folgt:

JavaScript-CodeInhalt in die Zwischenablage kopieren

4. "UTF-8">
"myCanvas" width=
9. "400px" height="300px" style="border: 1px solid red;"> Ihr Browser unterstützt das Canvas-Tag nicht.

14. Der entsprechende Anzeigeeffekt ist wie folgt:
    

    Als nächstes lassen wir die anderen Umgebungsbedingungen unverändert und verwenden erneut die Methode StrokeText(), um den Text im obigen Beispiel zu zeichnen. Der entsprechende JavaScript-Code lautet wie folgt:

    JavaScript-CodeInhalt in die Zwischenablage kopieren

    3. Wenn wir den Browser erneut verwenden, um auf die Seite zuzugreifen, sehen wir den folgenden Anzeigeeffekt (die Wörter „CodePlayer“ im Effektbild sind tatsächlich leer, aber da die Schriftart kleiner ist, scheinen sich die beiden Seiten zu überlappen):
    Bilder zeichnen

    
    In HTML5 können wir neben der Leinwand zum Zeichnen von Vektorgrafiken auch vorhandene Bilddateien auf der Leinwand „Leinwand“ zeichnen.

    Werfen wir zunächst einen Blick auf die wichtigsten Eigenschaften und Methoden des CanvasRenderingContext2D-Objekts, die zum Zeichnen von Bilddateien mithilfe von Canvas erforderlich sind:

    
    
    XML/HTML-Code

    Inhalt in die Zwischenablage kopieren
    drawImage(mixed image, int x, int y)

    1. Zeichnen Sie ausgehend vom angegebenen Koordinatenpunkt auf der Leinwand das gesamte Bild entsprechend der Originalgröße des Bildes. Das Bild hier kann ein Bildobjekt oder ein Canvas-Objekt sein (dasselbe unten).

    XML/HTML-Code

    Inhalt in die Zwischenablage kopieren
    

    drawImage(mixed image, int x, int y, int width, int height)

    1. Beginnen Sie am angegebenen Koordinatenpunkt auf der Leinwand und zeichnen Sie das gesamte Bild mit der angegebenen Größe (Breite und Höhe). Das Bild wird automatisch entsprechend der angegebenen Größe skaliert.
       drawImage(mixed image, int imageX, int imageY, int imageWidth, int imageHeight, int canvasX, int canvasY, int canvasWidth, int canvasHeight)
       Konvertieren Sie das Teilbild des angegebenen Bildes (mit (imageX, imageY)) als obere linke Ecke, Breite ist imageWidth, Höhe ist imageHeight) wird in die Leinwand in einen rechteckigen Bereich mit (canvasX, canvasY) als Koordinaten der oberen linken Ecke gezeichnet, Breite ist canvasWidth und Höhe ist canvasHeight
       Ja, du lies das richtig. Um ein Bild auf der Leinwand zu zeichnen, können wir eine Methode namens drawImage() verwenden, aber diese Methode verfügt über drei verschiedene Varianten. Jede Methodenvariante ermöglicht nicht nur den Empfang einer unterschiedlichen Anzahl von Parametern, sondern auch deren Bedeutung.

       Hier geben wir Beispiele für jede der oben genannten drei Variationen.

       Zuerst zeichnen wir das Google-Logo-Bild auf Leinwand (Originalgröße 550 x 190) mit der ersten Variante von drawImage().

       JavaScript-CodeInhalt in die Zwischenablage kopieren

       4. "UTF-8">
       "myCanvas" width=
       9. "400px" height="300px" style="border: 1px solid red;"> Ihr Browser unterstützt das Canvas-Tag nicht.

       14. Der entsprechende Anzeigeeffekt ist wie folgt:
           

           Da das Google-Logobild zu groß ist und den Größenbereich der Leinwand überschreitet, kann nur ein Teil des Bildes angezeigt werden. An dieser Stelle verwenden wir die zweite Variante, um das Google-Logobild auf die angegebene Breite und Höhe zu verkleinern und es in die Leinwand zu zeichnen.

           JavaScript-CodeInhalt in die Zwischenablage kopieren

           3. Nachdem wir das Google-Logobild skaliert haben, können Sie nun das gesamte Bild im Canvas sehen:

           Abschließend verwenden wir die dritte Methodenvariante, um den „Goo“-Teil des Google-Logos in die Leinwand zu zeichnen (die Bildgröße des „Goo“-Teils kann mit Tools wie Photoshop gemessen werden und die gemessene Größe wird verwendet direkt hier.

           
           JavaScript-Code

           Inhalt in die Zwischenablage kopieren
           3. An diesem Punkt können wir das „Goo“-Teilbild sehen, das auf der Leinwand angezeigt wird: