在画布上绘制具有透明背景的图像答案

【问题标题】：Draw image with transparent background on canvas在画布上绘制具有透明背景的图像
【发布时间】：2019-04-16 00:58:58
【问题描述】：

我需要在画布上绘制具有透明背景的图像。我有一个应该这样做的代码：

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

&lt;canvas id="canvasId"&gt;&lt;/canvas&gt;

但是背景不透明：

【问题讨论】：

实际图片不透明。
那么添加透明效果应该用什么背景呢？那你能给个实际透明图片的链接吗？
无特定背景。 PNG 允许第 4 个通道，即 alpha 通道。所以每个像素都有一个介于 0 和 255 之间的红色、绿色、蓝色和 alpha 值（不透明度）（如果是 8 位 PNG）。另请参阅此链接，了解何时使用哪种图像格式：stackoverflow.com/q/2336522

标签： javascript html image html5-canvas transparent

【解决方案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.onload = function() {
    ctx.drawImage(img, 0, 0);
}
img.src = "https://i.stack.imgur.com/RPEQQ.png"; //transparent png

&lt;canvas id="canvasId"&gt;&lt;/canvas&gt;

为了证明它不仅仅是一张白色的背景图片，我将body的背景图片设置为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;
}

&lt;canvas id="canvasId"&gt;&lt;/canvas&gt;

【讨论】：

【解决方案2】：

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

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

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

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/apple-touch-icon@2.png?v=73d79a89bded"; //transparent png
img.onload = function() {
  ctx.drawImage(img, 0, 0);
}

canvas {
  border: 1px solid black;
}

&lt;canvas id="canvasId" height="300" width="500"&gt;&lt;/canvas&gt;

【讨论】：