使用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';
}
有人能给我指出正确的方向吗比如设置一个属性或者调用一个函数来改变透明度?
当前回答
在画布上，我首先在一个自运行函数中绘制矩形0,0,canvas.width,canvas。高度作为画布的背景，我将globalAlpha设置为1 .然后我在自己的函数中绘制其他形状，并将其globalAlpha设置为0。无论数字是多少，它们都不会相互影响。
其他回答
就像Ian说的，使用c.globalAlpha = 0.5来设置不透明度，输入正方形的其他设置，然后使用c.save();。这将保存正方形的设置，然后你可以按照你想要的方式对正方形进行c.rect和c.fillStyle。后来我选择不使用c.restore来包装它，它工作得很好
这个建议是基于canvas 2d上下文中的像素操作。
中数:
您可以在字节级别上直接操作画布中的像素数据
为了操作像素，我们将在这里使用两个函数——getImageData和putImageData。
getImageData usage:
var myImageData = context.getImageData(left, top, width, height);
putImageData语法:
context.putImageData(myImageData, x, y);
context是你的canvas 2d context, x和y是在画布上的位置。
为了得到红色、绿色、蓝色和alpha值，我们将执行以下操作:
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文章
你可以。透明画布可以通过使用目标输出全局合成操作快速褪色。它不是100%完美的，有时它会留下一些痕迹，但它可以调整，取决于什么需要(即使用'source-over'，用alpha为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';
在画布上，我首先在一个自运行函数中绘制矩形0,0,canvas.width,canvas。高度作为画布的背景，我将globalAlpha设置为1 .然后我在自己的函数中绘制其他形状，并将其globalAlpha设置为0。无论数字是多少，它们都不会相互影响。
一些使用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之类的更改(实际上经常使用它们)，以确保您不会从其他地方破坏设置，特别是当从事件中调用绘图代码时。
