JavaScriptのCanvas APIのlineJoinプロパティを指定し、線の接続部の形状を指定する方法を解説します。

目次 [ close ]
  1. 下準備
  2. lineJoinプロパティで線の接続部の形状を指定

下準備

まずは下準備から。htmlの<body></body>内に以下のcanvas要素を配置します。

<canvas id="canvas"></canvas>

jsにてコンテキストを取得します。

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
canvas

画像ではキャンバスの範囲がわかりやすいようにcssにて背景色を設定してあります。

lineJoinプロパティで線の接続部の形状を指定

まずは2本の直角に接続された線を描画します。

ctx.lineWidth = 32;
ctx.beginPath();
ctx.moveTo(20, 40);
ctx.lineTo(80, 40);
ctx.lineTo(80, 100);
ctx.stroke();
直角に接続された線

形状の違いを確認しやすいようにlineWidthプロパティで太さを32に指定してあります。lineJoinプロパティで線の接続部の形状を指定することができます。文字列でround、bevel、miterのいずれかを取ります。既定値はmiterです。lineWidthの指定の下に以下のコードを追加します。

ctx.lineJoin = 'round';
roundで接続部を丸めた線

roundは接続部を丸めます。続いてbevel

ctx.lineJoin = 'bevel';
bevelで接続部を斜めにカットした線

bevelは接続部を斜めにカットします。