web-dev-qa-db-ja.com

html5キャンバス要素で透明な画像を描画する方法

私はグーグルクロームをターゲットにしています。キャンバスに透明な画像を描くことはできますか？透明とは、画像全体を50％の不透明度で描画することを意味します。

javascripthtmlcanvastransparency
14
Mr Bell

キャンバス要素にはグローバルアルファ属性があり、描画するものすべてに部分的な透明度を適用できます。

14
Eric Mickelsen

これは、次のようにglobalAlphaプロパティを使用して実行できます。

<!DOCTYPE HTML>
<html>
    <body>
        <canvas height="100" width="100" id="myCanvas"></canvas>
        <script>
            var canvas = document.getElementById("myCanvas");
            var context = canvas.getContext("2d");
            context.globalAlpha = 0.5;
            var myImage = new Image();
            myImage.src = "someImage.jpg";
            myImage.onload = function()
            {
                context.drawImage(myImage, 0, 0, 100, 100);
            };
        </script>
    </body>
</html>

そして、はい、それは画像で動作します。 IE 9、FF 5、Safari 5、およびChrome 12 on Win7で検証済み。

17
james.garriss

キャンバスのimage-dataを反復処理し、アルファ値を手動で設定してから、canvas.toDataURLメソッドを使用して透明な画像をエクスポートし、別のキャンバスに挿入することができます。

4
Patrick Wied