CanvasRenderingContext2D: lineWidth プロパティ
CanvasRenderingContext2D.lineWidth
はキャンバス 2D API のプロパティで、線の太さを設定します。
メモ: 線は stroke()
、strokeRect()
、strokeText()
メソッドで描画することができます。
値
例
線の幅の変更
この例では線の太さ 15 単位を使用して線と長方形を描画します。
HTML
html
<canvas id="canvas"></canvas>
JavaScript
js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.lineWidth = 15;
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineTo(130, 130);
ctx.rect(40, 40, 70, 70);
ctx.stroke();
結果
それ以外の例
このプロパティに関するそれ以外の例と説明については、スタイルと色の適用(キャンバスチュートリアル内)を参照してください。
仕様書
Specification |
---|
HTML Standard # dom-context-2d-linewidth-dev |
ブラウザーの互換性
BCD tables only load in the browser
関連情報
- このプロパティを定義しているインターフェイス:
CanvasRenderingContext2D
CanvasRenderingContext2D.lineCap
CanvasRenderingContext2D.lineJoin
- スタイルと色の適用