HTML5キャンバスを使って線を引く方法-H5 チュートリアル-php.cn

HTML5キャンバスを使って線を引く方法

不言

リリース： 2018-12-04 11:48:25

オリジナル

5511 人が閲覧しました

HTML Canvas を使用して線を描画するには、Canvas コンテキストの MoveTo() メソッドと LineTo() メソッドを使用する必要があります。具体的な内容を見てみましょう。

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 context = canvas.getContext(&#39;2d&#39;);
          context.beginPath();
          context.moveTo(120, 60);
          context.lineTo(240, 90);
          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>

ログイン後にコピー

手順:

  function draw() {
    var canvas = document.getElementById(&#39;SimpleCanvas&#39;);
    if ( ! canvas || ! canvas.getContext ) {
      return false;
    }
    var context = canvas.getContext(&#39;2d&#39;);
    context.beginPath();
    context.moveTo(120, 60);
    context.lineTo(240, 90);
    context.stroke();
  }

ログイン後にコピー

分析

上記の JavaScript コードは描画コードです。 document.getElementById() メソッドを使用して Canvas コンテキストを取得し、Canvas オブジェクトの getContext() メソッドを呼び出してCanvasコンテキストで、コンテキストのbeginPath.()メソッドを呼び出してパスを開始し、moveTo()で指定した位置にペンを移動し、lineTo()メソッドで指定した位置に線を描画します。ストローク()メソッド。

実行結果

上記の HTML ファイルを実行すると、次の結果が表示されます。

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 context = canvas.getContext(&#39;2d&#39;);
          context.beginPath();
          context.moveTo(120, 60);
          context.lineTo(240, 90);
          context.stroke();

          context.beginPath();
          context.moveTo(120, 75);
          context.lineTo(260, 120);
          context.stroke();

          context.beginPath();
          context.moveTo(160, 100);
          context.lineTo(200, 140);
          context.lineWidth = "3";
          context.stroke();

          context.beginPath();
          context.moveTo(200, 40);
          context.lineTo(360, 120);
          context.strokeStyle = &#39;#00C080&#39;;
          context.stroke();

          context.beginPath();
          context.moveTo(40, 20);
          context.lineTo(80, 160);
          context.strokeStyle = &#39;#C00080&#39;;
          context.lineWidth = "1";
          context.stroke();

          context.beginPath();
          context.moveTo(400, 10);
          context.lineTo(380, 200);
          context.strokeStyle = "rgb(96, 96, 225)";
          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>

ログイン後にコピー

手順:

上記のコードでは、線の太さと色を変更します。

線の太さを変更するには、Canvas の Context の lineWidth プロパティで線の太さを設定し、線の色を変更するには、Context のストロークスタイルプロパティで描画色を指定します。色の指定には、16 進形式、「RGB」形式、「青」、「赤」などの色名が使用できます。また、一度値を設定すると初期化されません。新しいパスは beginPath() を使用して作成されます。設定する値。

例

  context.beginPath();
  context.moveTo(160, 100);
  context.lineTo(200, 140);
  context.lineWidth = "3";
  context.stroke();
  context.beginPath();
  context.moveTo(200, 40);
  context.lineTo(360, 120);
  context.strokeStyle = &#39;#00C080&#39;;
  context.stroke();

ログイン後にコピー

上記のコードの場合、2行目ではlineWidthを指定していないため、先に指定したlineWidthの値を使用することができます。

操作結果

HTML5 canvas