Canvas globalAlpha 属性

定義と使用法

globalAlpha 属性は、描画の現在の透明値(alphaまたは透過度)を設定または返します。

globalAlpha 属性値は 0.0(完全透明)は 1.0(不透明)の間の数字。

まず、赤い矩形を描画して、その後透明度(globalAlpha)を0.2に設定し、緑色と青い矩形を描画します:

ブラウザはcanvasタグをサポートしていません。

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="red";
ctx.fillRect(20,20,75,50);
// 透明度を調節
ctx.globalAlpha=0.2;
ctx.fillStyle="blue";
ctx.fillRect(50,50,75,50);
ctx.fillStyle="green";
ctx.fillRect(80,80,75,50);

自分で試してみてください

文法

context.globalAlpha=number;

属性値

説明
number 透過度。0.0(完全に透明)から1.0(不透明)の間で指定する必要があります。

技術的詳細

デフォルト値: 1.0

ブラウザのサポート

表の数字は、その属性を完全にサポートする最初のブラウザのバージョンを示しています。

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

注記:Internet Explorer 8 以前のバージョンは <canvas> 要素をサポートしていません。