suchen

Heim  >  Artikel  >  Web-Frontend  >  Wie zeichne ich ein Rechteck mit Leinwand? Einführung in zwei Methoden zum Zeichnen von Rechtecken auf Leinwand

Wie zeichne ich ein Rechteck mit Leinwand? Einführung in zwei Methoden zum Zeichnen von Rechtecken auf Leinwand

不言
不言Original
2018-09-17 13:43:4517314Durchsuche

Das

canvas-Element verwendet JavaScript, um Bilder auf der Webseite zu zeichnen. Die Leinwand ist ein rechteckiger Bereich, in dem Sie jedes Pixel steuern können. Canvas bietet viele Möglichkeiten zum Zeichnen von Pfaden, Rechtecken, Kreisen und Zeichen sowie zum Hinzufügen von Bildern. Also, Wie zeichne ich ein Rechteck mit Leinwand? Der folgende Artikel stellt Ihnen die Implementierungsmethode zum Zeichnen eines Rechtecks ​​auf der Leinwand vor. Sie können einen Blick darauf werfen, wenn Sie sie benötigen.

Was wir wissen müssen, ist, dass die Methode, die sich auf Rechtecke in der Leinwand bezieht, rect() ist. Verwenden Sie die Methode Stroke() oder Fill(), um tatsächlich ein Rechteck auf der Leinwand zu zeichnen.

Die rect()-Methode kann 4 Parameter empfangen: die x-Koordinate des Rechtecks, die y-Koordinate des Rechtecks, die Breite des Rechtecks ​​und die Höhe des Rechtecks. Die Einheiten dieser Parameter sind Pixel.

Jetzt verwenden wir die Methoden Strokrect() und Fillrect(), um ein Rechteck zu zeichnen.

Schauen wir uns zunächst ein Beispiel eines gefüllten Rechtecks ​​an, das mit der Methode fillrect() im Canvas gezeichnet wurde.

Das von der fillRect()-Methode auf der Leinwand gezeichnete Rechteck wird mit der angegebenen Farbe gefüllt. Die Farbe der Füllung wird über die Eigenschaft fillStyle angegeben. 

    <!DOCTYPE html>  
    <html>  
    <head>  
    <meta charset="utf-8" />  
    <title>用canvas画矩形</title>  
    <style>  
    </style>  
    </head>  
    <body>  
    <canvas id="canvas" width="600" height="400"></canvas>  
    <script type="text/javascript">  
      function draw(id){  
          var canvas = document.getElementById(id);  
          var context = canvas.getContext(&#39;2d&#39;);  //getContext() 方法可返回一个对象  
          context.fillStyle = "green";  // 设置或返回用于填充绘画的颜色、渐变或模式              
          context.fillRect(50,50,400,300);  // x轴 y轴 宽 和 高 ,绘制“被填充”的矩形      
     }  
     draw("canvas");  
    </script>  
    </body>  
    </html>

Der Effekt des Zeichnens eines gefüllten Rechtecks ​​auf der Leinwand ist wie folgt:

Wie zeichne ich ein Rechteck mit Leinwand? Einführung in zwei Methoden zum Zeichnen von Rechtecken auf Leinwand

Dann schauen wir uns ein Beispiel eines ungefüllten Rechtecks ​​an, das mit der Strokerect()-Methode in Canvas gezeichnet wurde. Das mit der

StrokeRect()-Methode auf der Leinwand gezeichnete Rechteck wird mit der angegebenen Farbe gestrichelt. Die Strichfarbe wird über die Eigenschaft „StrokeStyle“ angegeben. 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>用canvas画矩形</title>
<style>
</style>
</head>
<body>
<canvas id="canvas" width="600" height="400"></canvas>
<script type="text/javascript">
  function draw(id){
      var canvas = document.getElementById(id);
      var context = canvas.getContext(&#39;2d&#39;);  //getContext() 方法可返回一个对象
      context.strokeStyle = "pink";  //图形边框的填充颜色
      context.lineWidth = 5;  //用宽度为 5 像素的线条来绘制矩形：     
      context.strokeRect(50,50,180,120);  //绘制矩形（无填充）
      context.strokeRect(110,110,180,120);      
 }
 draw("canvas");
</script>
</body>
</html>

Der Effekt des Zeichnens eines ungefüllten Rechtecks ​​auf Leinwand ist wie folgt:

Wie zeichne ich ein Rechteck mit Leinwand? Einführung in zwei Methoden zum Zeichnen von Rechtecken auf Leinwand

Schließlich endet dieser Artikel hier, mehr über Leinwand Weitere relevante Kenntnisse finden Sie im HTML5-Entwicklungshandbuch.

Das obige ist der detaillierte Inhalt vonWie zeichne ich ein Rechteck mit Leinwand? Einführung in zwei Methoden zum Zeichnen von Rechtecken auf Leinwand. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript html5 canvas
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：Wie zeichnet man eine Uhr auf Leinwand? Der Umsetzungsprozess des Zeichnens einer Ringuhr auf LeinwandNächster Artikel：Wie zeichnet man eine Uhr auf Leinwand? Der Umsetzungsprozess des Zeichnens einer Ringuhr auf Leinwand

In Verbindung stehende Artikel

Mehr sehen