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
特に描画コードのビットがイベントから呼び出される場合に、他の場所から設定を上書きしないように、変更をandglobalAlphaの間のようなものにラップします (実際にはそれらをたくさん使用します)。saverestore
編集：「正解」とマークされた答えは不正解です。
やり方は簡単です。このコードを試して、「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 でテスト済み。
この提案は、キャンバス 2D コンテキストでのピクセル操作に基づいています。
MDN から:
キャンバス内のピクセルデータをバイトレベルで直接操作できます
ピクセルを操作するには、ここでgetImageDataとの 2 つの関数を使用しますputImageData。
getImageData利用方法：
var myImageData = context.getImageData(left, top, width, height);
putImageData構文:
context.putImageData(myImageData, x, y);
contextキャンバスの 2D コンテキストはどこにあり、xとyはキャンバス上の位置です。
したがって、赤、緑、青、およびアルファ値を取得するには、次のようにします。
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は垂直オフセットです。
画像を半透明にするコード:
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 の完全な記事はこちら
あなたはできる。透明なキャンバスは、 destination-outグローバル コンポジット操作を使用してすばやくフェードできます。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';
できません。即時モードのグラフィックです。しかし、不透明度のある背景色でその上に長方形を描くことで、それをシミュレートすることができます。
画像が一定の色以外の上にある場合、かなり扱いにくくなります。この場合、ピクセル操作メソッドを使用できるはずです。画像を描画する前に領域を保存し、後で不透明度を上にブレンドします。