CanvasRenderingContext2D: lineWidth プロパティ
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
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
- スタイルと色の適用