suchen

Heim >Web-Frontend >H5-Tutorial >So zeichnen Sie Polygone wie Dreiecke und Rechtecke mit HTML5 Canvas_html5 Tutorial-Tipps

So zeichnen Sie Polygone wie Dreiecke und Rechtecke mit HTML5 Canvas_html5 Tutorial-Tipps

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOriginal
2016-05-16 15:51:501728Durchsuche

Die wichtigsten Eigenschaften und Methoden des CanvasRenderingContext2D-Objekts, die zum Zeichnen von Polygonen mit HTML5 Canvas erforderlich sind (die mit „()“ sind Methoden), sind wie folgt:

属性或方法 基本描述
strokeStyle 用于设置画笔绘制路径的颜色、渐变和模式。该属性的值可以是一个表示css颜色值的字符串。如果你的绘制需求比较复杂，该属性的值还可以是一个CanvasGradient对象或者CanvasPattern对象
globalAlpha 定义绘制内容的透明度，取值在0.0(完全透明)和1.0(完全不透明)之间，默认值为1.0。
lineWidth 定义绘制线条的宽度。默认值是1.0，并且这个属性必须大于0.0。较宽的线条在路径上居中，每边各有线条宽的一半。
lineCap 指定线条两端的线帽如何绘制。合法的值是 butt、round和square。默认值是"butt"。
beginPath() 开始一个新的绘制路径。每次绘制新的路径之前记得调用该方法。
moveTo(int x, int y) 定义一个新的绘制路径的起点坐标
lineTo(int x, int y) 定义一个绘制路径的中间点坐标
stroke(int x, int y) 沿着绘制路径的坐标点顺序绘制直线
closePath() 如果当前的绘制路径是打开的，则闭合该绘制路径。

Zeichne ein Dreieck

JavaScript-CodeInhalt in die Zwischenablage kopieren
  4. "UTF-8">
    5. HTML5-Canvas-Zeichnungsdreieck – Erste Schritte
    9. "myCanvas" width=
  9. "400px" height="300px" style="border: 1px solid red;"> Ihr Browser unterstützt das Canvas-Tag nicht.

  16. Der entsprechende Anzeigeeffekt ist wie folgt:
    2016314112438272.png (421×318)

    Rechtecke zeichnen
    Der Grund, warum Canvas-Zeichenrechtecke separat erwähnt werden, liegt darin, dass das Canvas-Pinselwerkzeug-CanvasRenderingContext2D-Objekt eine spezielle Methode zum Zeichnen von Rechtecken bereitstellt.

    XML/HTML-CodeInhalt in die Zwischenablage kopieren
    1. >
    2. <html>
    3. <Kopf>
    4. <meta charset="UTF- 8"> 
    5. <Titel>HTML5-Leinwand-Zeichnungsrechteck – Erste Schritte – Beispiel< / Titel>
    6. Kopf>
    7. <Körper>
    10. <canvas id="myCanvas" Breite="400px" Höhe="300px" style="border: 1px solid red;">
    11. Ihr Browser unterstützt das Canvas-Tag nicht.
    12. Leinwand>
    14. <Skript Typ="text/ Javascript">
    15. //Holen Sie sich das Canvas-Objekt (Canvas)
    16. var canvas = document.getElementById("myCanvas");
    17. //Erkennen Sie einfach, ob der aktuelle Browser das Canvas-Objekt unterstützt, um Syntaxfehler in einigen Browsern zu vermeiden, die HTML5 nicht unterstützen
    18. if(canvas.getContext){
    19. //Holen Sie sich das entsprechende CanvasRenderingContext2D-Objekt (Pinsel)
    20. var ctx = canvas.getContext("2d");
      21.  
      22. //Neuen Zeichenpfad starten
      23. ctx.beginPath();
      24. //Setzen Sie die Linienfarbe auf Blau
    25. ctx.StrokeStyle = "blue";
      26. //Zeichnen Sie ein Rechteck mit einer Breite von 80 Pixel und einer Höhe von 50 Pixel, indem Sie den Koordinatenpunkt (10,10) auf der Leinwand als Ausgangspunkt für die Zeichnung verwenden
      27. ctx.rect(10, 10, 80, 50);
      28. //Zeichne eine gerade Linie entsprechend dem angegebenen Pfad
      29. ctx.stroke();
      30. //Zeichenpfad schließen
      31. ctx.closePath();
      32. }
    33. Skript>
    34. Körper>
    35. html>
    Der entsprechende rechteckige Effekt wird wie folgt angezeigt:


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：So verwenden Sie HTML5 Canvas zum Zeichnen von Linien wie geraden Linien oder Polylinien_html5-Tutorial-FähigkeitenNächster Artikel：So verwenden Sie HTML5 Canvas zum Zeichnen von Linien wie geraden Linien oder Polylinien_html5-Tutorial-Fähigkeiten

In Verbindung stehende Artikel

Mehr sehen