如何在画布的其余部分绘制透明图像

Question

在此代码片段中，我简化了问题的一个版本

我想要什么:

我有一个游戏（以绿色背景表示）。在该游戏之上，我想绘制一个稍微透明的图像，该图像是使用 HTML 画布绘制和获取的（由不透明的蓝色方块表示）

问题：

图像是稍微透明的蓝色，但绿色背景不显示。 我希望背景（游戏）通过图像显示

//Fetch HTML Canvas
var canvas = document.getElementById("context");
var ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var width = canvas.width;
var height = canvas.height;

//draw a rectangle with a 50% transparency
ctx.fillStyle = "rgba(47, 0, 255, 0.5)";
ctx.fillRect(10, 10, 100, 100);

//fetch the image
var a = ctx.getImageData(10, 10, 100, 100);

//background
ctx.fillStyle = "green";
ctx.fillRect(0, 0, width, height)

//lay the image down
ctx.putImageData(a, 150, 150);

<canvas id="context"></canvas>

我已经尝试过在透明背景上捕获图像，但这似乎不起作用。每个透明图像都不允许背景透过该图像显示。

我还尝试使用

ctx.globalAlpha = NUM;

命令，但这在程序的任何部分都不起作用

Answer 1

我不确定我是否理解正确，但你是在第二个位置绘制背景，在正方形的顶部。我会绘制背景，然后绘制正方形，确保结果具有不透明度：

const canvas = document.getElementById("context");
const ctx = canvas.getContext("2d");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

ctx.fillStyle = "green";
ctx.fillRect(0, 0, canvas.width, canvas.height);

ctx.fillStyle = "rgba(47, 0, 255, 0.5)";
ctx.fillRect(10, 10, 100, 100);

const imgData = ctx.getImageData(10, 10, 100, 100);
ctx.putImageData(imgData, 150, 150);

<canvas id="context"></canvas>