在 canvas 上绘制具有透明背景的图像

Question

我需要在 canvas 上绘制一个透明背景的图像。我有一个代码可以做到这一点：

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://i.stack.imgur.com/7JXBD.png"; //transparent png

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

但是背景不透明：

Answer 1

您尝试显示的图像不是透明的，它只是有一个透明的方格背景。

可以找到 link 到具有透明背景的图像 here

使用此 link 可以解决您的问题：

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/Whosebug/img/apple-touch-icon@2.png?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>

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://i.stack.imgur.com/RPEQQ.png"; //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://i.stack.imgur.com/RPEQQ.png"; //transparent png

body {
    background-color: red;
}

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

在 canvas 上绘制具有透明背景的图像

Draw image with transparent background on canvas

javascript

html

image

html5-canvas

transparent