キャンバスで長方形を描くにはどうすればよいですか?キャンバス上に長方形を描画する 2 つの方法の紹介-H5 チュートリアル-php.cn

キャンバスで長方形を描くにはどうすればよいですか?キャンバス上に長方形を描画する 2 つの方法の紹介

不言

リリース： 2018-09-17 13:43:45

オリジナル

17294 人が閲覧しました

canvas 要素は JavaScript を使用して Web ページ上に画像を描画します。キャンバスは、すべてのピクセルを制御できる長方形の領域です。 Canvas には、パス、長方形、円、文字を描画したり、画像を追加したりするためのさまざまな方法があります。では、キャンバスを使用して長方形を描くにはどうすればよいでしょうか? キャンバス上に四角形を描画する実装方法については、次の記事で紹介していますので、必要に応じてご覧ください。

知っておく必要があるのは、キャンバス内の四角形に関連するメソッドは、rect() であり、実際にキャンバス上に四角形を描画するには、ストローク() メソッドまたは fill() メソッドを使用します。

rect() メソッドは、四角形の x 座標、四角形の y 座標、四角形の幅、四角形の高さの 4 つのパラメーターを受け取ることができます。これらのパラメータの単位はピクセルです。

次に、Strokerect() メソッドと fillrect() メソッドを使用して四角形を描画します。

まず、canvas で fillrect() メソッドを使用して描画された塗りつぶされた四角形の例を見てみましょう。

fillRect() メソッドは、指定された色で塗りつぶされた四角形をキャンバス上に描画します。塗りつぶしの色は、fillStyle プロパティによって指定されます。

    <!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>

ログイン後にコピー

キャンバス上に塗りつぶされた四角形を描画すると、次のような効果が得られます:

##それでは、canvas で strokerect() メソッドを使用して描画された塗りつぶされていない四角形の例を見てみましょう。

strokeRect() メソッドは、指定された色でストロークされた四角形をキャンバス上に描画します。ストロークの色は、ストロークスタイルプロパティを通じて指定されます。

<!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>

ログイン後にコピー

キャンバス上に塗りつぶされていない四角形を描画する効果は次のとおりです:

キャンバスで長方形を描くにはどうすればよいですか?キャンバス上に長方形を描画する 2 つの方法の紹介