HTML5キャンバスを使用して長方形を描画する方法-H5 チュートリアル-php.cn

HTML5キャンバスを使用して長方形を描画する方法

不言

リリース： 2020-10-21 09:32:19

オリジナル

5415 人が閲覧しました

HTML5 キャンバスを使用して四角形を描画する方法: まず、対応する HTML サンプルファイルを作成し、次に「canvas.getContext('2d'」などのコードステートメントを使用して Canvas コンテキストの rect メソッドを通じて四角形を描画します。 );"。

HTML5キャンバスを使用して長方形を描画する方法

HTML5 キャンバスを使用して四角形を描画するには、Canvas コンテキストの rect() メソッドを使用する必要があります。次に、具体的なコードの実装を見てみましょう。

HTML5 canvas

具体的な例を見てみましょう

コードは次のとおりです

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title></title>
  <meta charset="utf-8" />
  <script type="text/javascript">
  function draw() {
    var canvas = document.getElementById(&#39;SimpleCanvas&#39;);
    if ( ! canvas || ! canvas.getContext ) {
      return false;
    }
    var cx = 360;
    var cy = 400;
    var radius = 36;
    var context = canvas.getContext(&#39;2d&#39;);
    context.beginPath();
    context.rect(240, 80, 160, 80);
    context.fillStyle = &#39;peachpuff&#39;;
    context.fill();
    context.lineWidth = 2;
    context.strokeStyle = &#39;coral&#39;;
    context.stroke();
  }
  </script>
</head>
<body onload="draw()" style="background-color:#D0D0D0;">
  <canvas id="SimpleCanvas" width="640" height="480" style="background-color:#FFFFFF;"></canvas>
  <div>Canvas Demo</div>
</body>
</html>

ログイン後にコピー

手順:

Canves オブジェクトは document.getElementById() メソッドによって取得されます。Canves オブジェクトは getContext() メソッドを呼び出します。この処理は、キャンバスへの描画とともに処理されます。

コンテキストの beginPath() メソッドを呼び出してパスを開始します。長方形を描画するには、rect() を使用します。 Rect の最初のパラメータと Rect の 2 番目のパラメータは、長方形の左上隅の X、Y 座標です。 3 番目のパラメーターは描画された四角形の幅、4 番目のパラメーターは描画された四角形の高さです。

fill() メソッドを使用して内部を塗りつぶし、ストロークメソッドを使用して輪郭を描画します。

実行結果

Webブラウザを使用して、作成したHTMLファイルを実行します。以下のような効果が表示されます。

HTML5 canvas

上の例の長方形は内部が塗りつぶされています。内部塗りつぶしのない長方形を見てみましょう。

コードは次のとおりです。

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title></title>
  <meta charset="utf-8" />
  <style type="text/css">
    <!--
    /*背景色和背景图*/
    .canvas{
      background-color:#FFFFFF;
      background-image: url("img/t.jpg");
    }
    -->
  </style>
  <script type="text/javascript">
  function draw() {
    var canvas = document.getElementById(&#39;SimpleCanvas&#39;);
    if ( ! canvas || ! canvas.getContext ) {
      return false;
    }
    var cx = 360;
    var cy = 400;
    var radius = 36;
    var context = canvas.getContext(&#39;2d&#39;);
    context.beginPath();
    context.rect(240, 80, 160, 80);
    context.lineWidth = 4;
    context.strokeStyle = &#39;coral&#39;;
    context.stroke();
}
  </script>
</head>
<body onload="draw()" style="background-color:#D0D0D0;">
  <canvas id="SimpleCanvas" width="640" height="480" class="canvas"></canvas>
  <div>Canvas Demo</div>
</body>
</html>

ログイン後にコピー

注: 画像を描画するときに、fill() メソッドを呼び出さず、ストローク() メソッドのみを実行すると、内部を塗りつぶさずに四角形を描画できます。

実行結果

ブラウザ上には以下のような効果が表示されます

HTML5 canvas

最後に内部を直接埋める長方形の描画を見てみましょう

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title></title>
  <meta charset="utf-8" />
  <script type="text/javascript">
  function draw() {
    var canvas = document.getElementById(&#39;SimpleCanvas&#39;);
    if ( ! canvas || ! canvas.getContext ) {
      return false;
    }
    var cx = 360;
    var cy = 400;
    var radius = 36;
    var context = canvas.getContext(&#39;2d&#39;);
    context.beginPath();
    context.rect(260, 120, 220, 120);
    context.fillStyle = &#39;burlywood&#39;;
    context.fill();
}
  </script>
</head>
<body onload="draw()" style="background-color:#D0D0D0;">
  <canvas id="SimpleCanvas" width="640" height="480" style="background-color:#FFFFFF;"></canvas>
  <div>Canvas Demo</div>
</body>
</html>

ログイン後にコピー

実行結果は次のとおりです

HTML5キャンバスを使用して長方形を描画する方法