CanvasRenderingContext2D: lineWidth プロパティ
Baseline
広く利用可能
この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2015年7月以降、すべてのブラウザーで利用可能です。
CanvasRenderingContext2D.lineWidth はキャンバス 2D API のプロパティで、線の太さを設定します。
メモ:
線は stroke()、strokeRect()、strokeText() メソッドで描画することができます。
値
線の幅を座標空間単位で指定した数値。 0、負、Infinity、NaN の値は無視されます。この値は既定では 1.0 です.
例
線の幅の変更
この例では線の太さ 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();
結果
それ以外の例
このプロパティに関するそれ以外の例と説明については、スタイルと色の適用（キャンバスチュートリアル内）を参照してください。
仕様書
| 仕様書 |
|---|
| HTML # dom-context-2d-linewidth-dev |
ブラウザーの互換性
関連情報
- このプロパティを定義しているインターフェイス:
CanvasRenderingContext2D CanvasRenderingContext2D.lineCapCanvasRenderingContext2D.lineJoin- スタイルと色の適用