キャンバス要素が描画された後の要素の不透明度（アルファ、透明性）を変更する方法は？

StackOverflow https://stackoverflow.com/questions/2359537

質問

HTML5を使用します <canvas> 要素、画像ファイル（PNG、JPEGなど）をロードし、キャンバスに完全に透過的に描画してからフェードインします。画像をロードしてキャンバスに描画する方法を見つけましたが、不透明度を描いたら、その不透明度を変える方法がわかりません。

これが私がこれまでに持っているコードです：

var canvas = document.getElementById('myCanvas');

if (canvas.getContext)
{
    var c           = canvas.getContext('2d');
    c.globalAlpha   = 0;

    var img     = new Image();
    img.onload  = function() {
        c.drawImage(img, 0, 0);
    }
    img.src     = 'image.jpg';
}

誰かが私を正しい方向に向けて、設定するプロパティや、不透明度を変える関数を呼び出すかどうかを教えてください。

役に立ちましたか？

解決

また、この質問への回答を探しています（明確にするために、私はあなたが不透明度で形を描く方法など、ユーザー定義の不透明度を使用して画像を描くことができるようにしたい）あなたがプリミティブな形状で描くと、塗りつぶしとストロークを設定できます透明性を定義するためのアルファで色。私が今結論付けている限り、これは画像描画に影響しないようです。 

//works with shapes but not with images
ctx.fillStyle = "rgba(255, 255, 255, 0.5)";

私はそれを設定すると結論付けました globalCompositeOperation 画像で動作します。 

//works with images
ctx.globalCompositeOperation = "lighter";

画像を覆い、簡単に透明にすることができるように、色を設定するためのいくつかの親切な3番目の方法があるのだろうか。

編集：

さらに掘った後、私はあなたが設定することにより、画像の透明度を設定できると結論付けました globalAlpha 画像を描画する前のパラメーター：

//works with images
ctx.globalAlpha = 0.5

時間の経過とともにフェード効果を達成したい場合は、アルファ値を変更する何らかのループが必要です。これはかなり簡単です。それを達成する1つの方法は setTimeout 関数、それを調べて、時間の経過とともにアルファを変更するループを作成します。

他のヒント

使用するためのいくつかの単純な例コード globalAlpha:

ctx.save();
ctx.globalAlpha = 0.4;
ctx.drawImage(img, x, y);
ctx.restore();

必要に応じて img ロードされる：

var img = new Image();
img.onload = function() {
    ctx.save();
    ctx.globalAlpha = 0.4;
    ctx.drawImage(img, x, y);
    ctx.restore()
};
img.src = "http://...";

ノート：

  • をセットする 'src' 最後に、あなたを保証するために onload イメージがすでにキャッシュに含まれていても、ハンドラーはすべてのプラットフォームで呼び出されます。

  • 変更を次のようなものにラップします globalAlpha aの間 save と restore （実際、それらをたくさん使用しています）、特にイベントから描画コードが呼び出される場合は、他の場所からのクラッカー設定をしないようにします。

編集： 「正しい」とマークされた答えは正しくありません。

簡単です。このコードを試して、「IE.jpg」を手元に持っている写真と交換してください。

<!DOCTYPE HTML>
<html>
    <head>
        <script>
            var canvas;
            var context;
            var ga = 0.0;
            var timerId = 0;

            function init()
            {
                canvas = document.getElementById("myCanvas");
                context = canvas.getContext("2d");
                timerId = setInterval("fadeIn()", 100);
            }

            function fadeIn()
            {
                context.clearRect(0,0, canvas.width,canvas.height);
                context.globalAlpha = ga;
                var ie = new Image();
                ie.onload = function()
                {
                    context.drawImage(ie, 0, 0, 100, 100);
                };
                ie.src = "ie.jpg";

                ga = ga + 0.1;
                if (ga > 1.0)
                {
                    goingUp = false;
                    clearInterval(timerId);
                }
            }
        </script>
    </head>
    <body onload="init()">
        <canvas height="200" width="300" id="myCanvas"></canvas>
    </body>
</html>

重要なのはGlobalAlphaプロパティです。

Win7でIE 9、FF 5、Safari 5、およびChrome 12でテストしました。

投稿はこれまでのところ古いです私は私の提案で行きます。提案は、Canvas 2Dコンテキストでのピクセル操作に基づいています。 MDNから：

バイトレベルでキャンバスのピクセルデータを直接操作できます

ピクセルを操作するには、ここで2つの機能を使用します - getimagedataとputimagedata

getImageDATA関数の使用法：

var myimagedata = context.getimagedata（左、上、幅、高さ）;

およびputimagedata構文：

context.putimagedata（myimagedata、dx、dy）; // dx、dy -x、y canvasのオフセット

どこ 環境 キャンバス2Dコンテキストです

したがって、赤い緑の青とアルファの値を取得するには、次のことを行います。

var r = imageData.data[((x*(imageData.width*4)) + (y*4))];
var g = imageData.data[((x*(imageData.width*4)) + (y*4)) + 1];
var b = imageData.data[((x*(imageData.width*4)) + (y*4)) + 2];
var a = imageData.data[((x*(imageData.width*4)) + (y*4)) + 3];

どこ バツ xオフセットです、 y キャンバスでyオフセットです

したがって、イメージを半透明にするコードを使用しています

var canvas = document.getElementById('myCanvas');
var c = canvas.getContext('2d');
var img = new Image();
img.onload  = function() {
   c.drawImage(img, 0, 0);
   var ImageData = c.getImageData(0,0,img.width,img.height);
   for(var i=0;i<img.height;i++)
      for(var j=0;j<img.width;j++)
         ImageData.data[((i*(img.width*4)) + (j*4) + 3)] = 127;//opacity = 0.5 [0-255]
   c.putImageData(ImageData,0,0);//put image data back
}
img.src = 'image.jpg';

あなたはあなた自身の「シェーダー」を作ることができます - 完全なMDNの記事を参照してください ここ

あなたはできる。透明なキャンバスは、使用してすぐにフェードすることができます 宛先廃止 グローバルコンポジット操作。それは100％完璧ではありません。時にはいくつかの痕跡を残しますが、必要なものに応じて微調整することができます（つまり、「ソース」を使用して、0.13のアルファで白い色で満たし、キャンバスを準備するためにフェードします）。

// Fill canvas using 'destination-out' and alpha at 0.05
ctx.globalCompositeOperation = 'destination-out';
ctx.fillStyle = "rgba(255, 255, 255, 0.05)";
ctx.beginPath();
ctx.fillRect(0, 0, width, height);
ctx.fill();
// Set the default mode.
ctx.globalCompositeOperation = 'source-over';

これは質問に最もよく答えていると思います。実際には、すでに描かれているもののアルファ値が変わります。たぶん、この質問が尋ねられたとき、これはAPIの一部ではなかったでしょう。

2Dコンテキストが与えられます c.

function reduceAlpha(x, y, w, h, dA) {
    var screenData = c.getImageData(x, y, w, h);
    for(let i = 3; i < screenData.data.length; i+=4){
    screenData.data[i] -= dA; //delta-Alpha
    }
    c.putImageData(screenData, x, y );
}

使用する場合 jcanvas 使用できるライブラリ 不透明 描くときのプロパティ。その上にフェード効果が必要な場合は、異なる値で再描画するだけです。

できません。即時モードのグラフィックスです。ただし、背景色の長方形を不透明に描画することで、シミュレートすることができます。

画像が一定の色以外のものにある場合、それはかなりトリッキーになります。この場合、ピクセル操作方法を使用できるはずです。画像を描画する前にエリアを保存してから、その後、それを上にバックバックして、その後不透明度を付けます。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top