在画布上绘制带有透明背景的图像。

Question

我需要在画布上绘制一个带透明背景的图像。我有一段代码应该可以做到这一点：

var can = document.getElementById('canvasId');
var ctx = can.getContext('2d');

ctx.fillRect(50,50,500,500); // something in the background

var img = new Image();
img.onload = function() {
    ctx.drawImage(img, 0, 0);
}
img.src = "https://istack.dev59.com/7JXBD.webp"; //transparent png

<canvas id="canvasId"></canvas>

但是背景不是透明的：

- лолка лолкович

---

实际图像不是透明的。 - Jack Bashford

那么添加透明效果需要什么背景？你能给一个实际的透明图像链接吗？ - лолка лолкович

PNG允许使用第四个通道，即alpha通道。因此，每个像素都有红色、绿色、蓝色和透明度值（在8位PNG的情况下为0到255）。此外，查看此链接以了解何时使用哪种图像格式：https://dev59.com/gnE95IYBdhLWcg3wY81l - Martin Schneider

Answer 1

您正在尝试显示的图像并非透明，只是具有透明的棋盘格背景。

可以在此处找到具有透明背景的图像链接。

使用此链接可以修复您的问题：

var can = document.getElementById('canvasId');
var ctx = can.getContext('2d');


ctx.fillRect(50, 50, 500, 500); // something in the background

var img = new Image();
img.src = "https://cdn.sstatic.net/Sites/stackoverflow/img/[e-mail]?v=73d79a89bded"; //transparent png
img.onload = function() {
  ctx.drawImage(img, 0, 0);
}

canvas {
  border: 1px solid black;
}

<canvas id="canvasId" height="300" width="500"></canvas>

- Nick Parsons

Answer 2

您的代码运行完美 - 您只需要一个带有透明背景的图像 - 就像这个问号：

var can = document.getElementById('canvasId');
var ctx = can.getContext('2d');


ctx.fillRect(50,50,500,500); // something in the background

var img = new Image();
img.onload = function() {
    ctx.drawImage(img, 0, 0);
}
img.src = "https://istack.dev59.com/RPEQQ.webp"; //transparent png

<canvas id="canvasId"></canvas>

为了证明这不仅是一个白色背景图片，我将正文的背景图片设置为 red：

var can = document.getElementById('canvasId');
var ctx = can.getContext('2d');


ctx.fillRect(50,50,500,500); // something in the background

var img = new Image();
img.onload = function() {
    ctx.drawImage(img, 0, 0);
}
img.src = "https://istack.dev59.com/RPEQQ.webp"; //transparent png

body {
    background-color: red;
}

<canvas id="canvasId"></canvas>

- Jack Bashford