Wie zeichne ich ein Rechteck mit Leinwand? Einführung in zwei Methoden zum Zeichnen von Rechtecken auf Leinwand-H5-Tutorial-php.cn

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

不言

Freigeben： 2018-09-17 13:43:45

Original

17341 Leute haben es durchsucht

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>

Nach dem Login kopieren

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

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>

Nach dem Login kopieren

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!