キャンバス要素が描画された後の要素の不透明度(アルファ、透明性)を変更する方法は?
-
23-09-2019 - |
質問
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 );
}
できません。即時モードのグラフィックスです。ただし、背景色の長方形を不透明に描画することで、シミュレートすることができます。
画像が一定の色以外のものにある場合、それはかなりトリッキーになります。この場合、ピクセル操作方法を使用できるはずです。画像を描画する前にエリアを保存してから、その後、それを上にバックバックして、その後不透明度を付けます。