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

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

var can=document.getElementById（'canvasId'）；
var ctx=can.getContext（'2d'）；
ctx.fillRect（50,50500500）；//背景中的东西
var img=新图像（）；
img.onload=函数（）{
ctx.drawImage（img，0,0）；
}
img.src=”https://i.stack.imgur.com/7JXBD.png"; //透明png

---

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

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

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

var can=document.getElementById（'canvasId'）；
var ctx=can.getContext（'2d'）；
ctx.fillRect（50，50，500，500）；//背景中的东西
var img=新图像（）；
img.src=”https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon@2.png？v=73d79a89bded”//透明png
img.onload=函数（）{
ctx.drawImage（img，0,0）；
}

画布{
边框：1px纯黑；
}

---

您的代码工作得非常完美-您只需要一个背景透明的图像-如以下问号：

var can=document.getElementById（'canvasId'）；
var ctx=can.getContext（'2d'）；
ctx.fillRect（50,50500500）；//背景中的东西
var img=新图像（）；
img.onload=函数（）{
ctx.drawImage（img，0,0）；
}
img.src=”https://i.stack.imgur.com/RPEQQ.png"; //透明png

---

实际图像不是透明的。那么应该使用什么背景来添加透明效果呢？你能给一个链接到实际的透明图像吗？没有特定的背景。PNG允许第四个通道，即alpha通道。因此，每个像素都有一个介于0和255之间的红、绿、蓝和alpha值（不透明度）（在8位PNG的情况下）。另请参见此链接，了解何时使用哪种图像格式：