Canvas の線の幅、色、形状を変更するにはどうすればよいですか?

Canvas では、線のデフォルトの色は黒、幅は lpx ですが、関連するプロパティを使用して線にさまざまなスタイルを追加できます。ここでは、線の太さ、線の色、端点の形状の3つの観点から線のスタイルを設定する方法を詳しく説明します。

1.線幅を設定する

線の幅は lineWidth 属性を使用して定義できます。この属性の値はピクセル単位の数値 (単位なし) です。線の幅を設定するサンプルコードは次のとおりです。

context.lineNidth='10';

上記のコードは線幅を 10 に設定します。

2. ストロークの色を設定する

線のストロークの色を定義するには、ストロークスタイル属性を使用します。この属性の値は、16 進数の色の値または色の英語名です。ストロークの色を設定するサンプルコードは次のとおりです。

context.strokeStyle='4f00';
context.strokeStyle='red';

上記のコードでは、両方のメソッドを使用して線のストロークの色を赤に設定できます。

3. エンドポイントの形状を設定する

デフォルトでは、線の端点は正方形です。端点の形状は、lineCap プロパティを通じて変更できます。サンプルコードは次のとおりです。

context.1ineCap=，属性值'；

表に示すように、lineCap 属性には 3 つの値があります。

lineCap 属性の値

ラインのスタイルを設定する基本的な方法が理解できたので、次はラインのスタイルを設定する方法を説明します。

(1) C:icodekchapter02\demol3.html を作成し、キャンバスを作成し、線の幅、色、端点の形状を設定する具体的なコードは次のとおりです。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <canvas id="cas" width="300" height="300">
     您的测览器不支持Canvas标签
  </canvas>
  <script>
   var context=document.getElementById('cas').getContext('2d');
   context.moveTo(10,10);          // 定义初始位置
   context.1ineTo(300,10);         // 定义连线端点
   context.lineWidth='10';         // 设置线的宽度
   context.strokeStyle='red';      // 设置线的颜色
   context.lineCap='round';        // 设置线的端点形状
   context.stroke();               // 定叉描边
  </script>
</body>
</html>

上記のコードでは、コードの 15 行目は線の幅を 10 ピクセルに設定し、コードの 16 行目は線の色を赤に設定し、コードの 17 行目は線の終点を円に設定します。

(2) コードを保存し、ブラウザでテストすると、ページの効果は図のようになります。

線の幅、色、端点の形状を設定する

ページに赤い線が表示され、線のスタイルが正常に設定されたことを示します。

Canvas の線の幅、色、形状を変更するにはどうすればよいですか?

おすすめ