適当CGプログラミング » Canvas辞典 »

不透明度の設定

不透明度の設定

globalAlpha

解説

globalAlphaを使用すればデフォルトの塗り色の不透明度を設定することが出来ます。
ただ、ブラウザによっては半透明になりませんし、色が薄くなるだけでその背後にあるイメージが透けて見えなかったりもします。

globalAlpha
塗りつぶしの際の、不透明度を0〜1の小数で指定します。

ソースコード

<html>
<head>
<!--[if IE]>
<script type="text/javascript" src="excanvas.js"></script>
<![endif]-->
<script type="text/javascript">
function sbGlobalAlpha() {
    elmCv = document.getElementById('cv');
    ctxCv = elmCv.getContext('2d');
    ctxCv.fillRect(180,20,40,360);
    
    //Text 1
    ctxCv.fillRect(50,30,300,40);
    
    //Text 2
    ctxCv.globalAlpha = 0;
    ctxCv.fillRect(50,90,300,40);
    
    //Text 3
    ctxCv.globalAlpha = 0.25;
    ctxCv.fillRect(50,150,300,40);
    
    //Text 4
    ctxCv.globalAlpha = 0.5;
    ctxCv.fillRect(50,210,300,40);
    
    //Text 5
    ctxCv.globalAlpha = 0.75;
    ctxCv.fillRect(50,270,300,40);
    
    //Text 6
    ctxCv.globalAlpha = 1;
    ctxCv.fillRect(50,330,300,40);
}
window.onload = sbGlobalAlpha;
</script>
</head>
<body>
<canvas id="cv" width="400" height="400"></canvas>
</body>
</html>

サンプル

Copyright © 1999-2006 Hikijishi All Rights Reserved.
[] [cgp][0.00157809257507324]