HTMLリファレンスマニュアル

HTMLタグ完全一覧

HTML canvas globalAlpha属性

globalAlphaはCanvas 2D APIは、canvas上に描画する前に、グラフと画像の透明度を設定する属性を説明するために使用されます。数値の範囲は0.0 （完全透明）から1.0 （完全不透明）。

オンラインサンプル

まず、赤い矩形を描画し、その後透明度（globalAlpha）を0に設定します。5、それから青と緑の矩形を描画します：

例

<!DOCTYPE　html>
<html>
<head>
<meta　charset="utf-8">-8>
<title>HTML　canvas　globalAlpha属性の使用-基本チュートリアル(oldtoolbag.com)</<title>
</<head>
<body>
<canvas　id="myCanvas"　width="300"　height="150"　style="border:1px　solid　#d3d3d3>
あなたのブラウザは　HTML5　canvas　タグ。
</canvas>
<script>
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);
</script>
</body>
</html>

テストを確認する ‹/›

ブラウザの互換性

IEFirefoxOperaChromeSafari

Internet Explorer 9、Firefox、Opera、Chrome および Safari が globalAlpha 属性をサポートしています。

注意：Internet Explorer 8 及びその以前のバージョンでは <canvas> 要素をサポートしていません。

定義と使用方法

globalAlpha 属性は、图形の現在のalphaまたは透明度値を設定または返します。

globalAlpha 属性値は0.0（完全透明）と1.0（透明度なし）と

デフォルト値：	1.0
JavaScript 语法：	context.globalAlpha=number;

属性値

値	説明
number	透明値。0.0（完全透明）と 1.0（不透明）之间。

　HTML canvas リファレンスマニュアル

HTML: <template> タグ