JavaScriptのCanvasで線の太さを設定する方法

2024-02-15 12:35 JavaScript Canvas 線の太さ
  1. lineWidthプロパティを使用する方法: CanvasRenderingContext2DオブジェクトのlineWidthプロパティを使用して、線の太さを指定します。以下のコード例では、線の太さを10ピクセルに設定しています。
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.lineWidth = 10;
  1. strokeStyleとlineWidthを組み合わせる方法: strokeStyleプロパティを使用して線の色を指定し、lineWidthプロパティを使用して線の太さを指定します。以下のコード例では、線の色を赤色に、太さを5ピクセルに設定しています。
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.strokeStyle = 'red';
ctx.lineWidth = 5;
  1. setLineDashメソッドを使用する方法: setLineDashメソッドを使用して、破線のパターンを指定し、そのパターンで線を描画します。以下のコード例では、破線のパターンを[10, 5]として、線の太さを3ピクセルに設定しています。
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.lineWidth = 3;
ctx.setLineDash([10, 5]);