如何更改新图像对象的不透明度答案

【问题标题】：How do I change opacity of a new image object如何更改新图像对象的不透明度
【发布时间】：2021-08-13 02:43:15
【问题描述】：

我正在尝试降低画布上绘制的图像的不透明度，但它不起作用

var img = new Image();
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext('2d');

img.src = './picture.jpg';
canvas.width = img.width;
canvas.height = img.height;

img.style.opacity = 0.5;

ctx.drawImage(img, 30, 30, canvas.width, canvas.height);

【问题讨论】：

你必须在绘制之前将alpha设置为canvas元素，而不是图像（图像样式是浏览器显示的，而不是canvas元素看到的）stackoverflow.com/questions/31708618/…
你是最好的男人！谢谢

标签： javascript html javascript-objects

【解决方案1】：

/// only image will have alpha affected:
context.globalAlpha = 0.5;
context.drawImage(image, x, y);
context.globalAlpha = 1.0;

https://stackoverflow.com/a/18949160/9161582

【讨论】：