JavaScriptのCanvas APIのglobalAlphaプロパティを指定し、半透明な図形を描画する方法を解説します。

目次 [ close ]
  1. 下準備
  2. globalAlphaプロパティを指定し、半透明な図形を描画

下準備

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

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

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

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

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

globalAlphaプロパティを指定し、半透明な図形を描画

まずは矩形を描画します。

ctx.fillRect(10, 10, 80, 80);
矩形を描画

fillRect()直前に以下のコードを張り付けることで透過させることができます。

ctx.globalAlpha = 0.5;
半透明の矩形

globalAlphaプロパティで透明度を指定でき、以降に描画される図形に適用されます。0（完全に透明）から1（不透明）の範囲で指定します。既定値は1です。