如何在画布元素绘制后更改元素的不透明度(alpha、透明度)？
如何在画布元素绘制后更改元素的不透明度(alpha、透明度)？
提问于 2010-03-02 06:22:24
使用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';
}有没有人能给我指出正确的方向，比如要设置的属性，或者要调用的改变不透明度的函数？
回答 4
Stack Overflow用户
发布于 2019-04-15 03:54:26
我认为这最好地回答了这个问题，它实际上改变了已经绘制的东西的alpha值。也许当这个问题被问到时，这并不是api的一部分。
给定2d上下文c。
function reduceAlpha(x, y, w, h, dA) {
let 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 );
}Stack Overflow用户
发布于 2021-06-29 20:57:42
设置全局Alpha绘制具有不透明度的对象，然后将其设置回法线。
//////////////////////// circle ///////////////////////
ctx.globalAlpha = 0.75;
ctx.beginPath();
ctx.arc(x1, y1, r1, 0, Math.PI*2);
ctx.fillStyle = colour;
ctx.fill();
ctx.closePath();
ctx.globalAlpha = 1;
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/2359537
复制相关文章
相似问题