イナヅマTVログ

Canvas始めました – 透明度のプロパティ:globalAlpha

| 0件のコメント

一度指定した透明度をずっと維持してくれるglobalAlphaの巻。

globalAlpha
property: 0 ~ 1

globalAlphaを設定すると以降の塗りの透明度に自動的に適用される。

HTML

<canvas id='canvas'></canvas>

JavaScript

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
 
context.save();
 
context.fillStyle = '#0000ff';
context.fillRect(100,100,300,50);
 
context.globalAlpha = 0.75;
 
context.setTransform(1,0,0,1,0,0);
var x=100,y=100,w=50,h=50;
context.translate(x+0.5*w,y+0.5*h);
context.scale(2,2);
context.fillStyle = '#ff0000';
context.fillRect(-0.5*w,-0.5*h,w,h);
 
context.setTransform(1,0,0,1,0,0);
 
context.fillStyle = '#f00';
context.fillRect(200,75,50,100);
 
context.restore();
 
context.fillStyle = '#f00';
context.fillRect(300,75,50,100);

Canvas globalAlpha

globalAlphaは透明度のglobal プロパティ(?)。
設定すると以降の塗りに自動的に設定される。
デフォルトは1、不透明。

透明度を解除する時はglobalAlphaに1をセットするか、globalAlpha適用前にsaveしrestoreする。

一回だけの設定だったら塗りにrgbaで透明度を設定して方が楽。
続けて複数の塗りに同じ透明度を設定する時使うと便利そう。

コメントを残す