一度指定した透明度をずっと維持してくれる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); |
globalAlphaは透明度のglobal プロパティ（？）。
設定すると以降の塗りに自動的に設定される。
デフォルトは1、不透明。
透明度を解除する時はglobalAlphaに1をセットするか、globalAlpha適用前にsaveしrestoreする。
一回だけの設定だったら塗りにrgbaで透明度を設定して方が楽。
続けて複数の塗りに同じ透明度を設定する時使うと便利そう。