new Image()对象(src="*.png")怎么让png图片空白区域呈透明?

Question

现在需要给canvas的drawImage(img,dx,dy)方法传递一个image对象, 供其画图用.
但是它默认画出来的图片, 周边本来是透明的区域, 默认填充了白色.
如下是图片源:

绘制完成后的效果:

效果图中, 上下两个圆圈的边角区域明显填充了不透明的白色, 从而遮住了下一层的圆圈.
周边马赛克区域, 需要画出来后是透明的, 而不是填充了白色
请问, 这种需求怎么实现呢?

部分代码

新建image对象, 最终会给canvas作图

var image = new Image();
image.src = "../img/mubiao.png";
...
var ctx = canvas.getContext("2d");
ctx.drawImage(image,dx,dy);

Answer 1

没懂你的透明是什么意思，就是因为透明才看到白色背景啊

Answer 2

尝试了一下，无法复现，透明部分不会自动填充白色。建议给份在线代码。
另外，我怀疑你保存成的图片格式可能不是png，那么从ps导出时会自动把透明部分填充成白色。

Answer 3

[问题基本已解决]
图片的四个白底的角并不是由于canvas的drawImage(img,...)造成的, 也不是因为image本身不透明(png格式, 四个角的确时透明的). 而是在画图前, 可能默认会填充一个矩形区域, 然后才能画image.
于是, lz采用笨方法: 画图前将矩形区域的长宽设成很小, 至少小于待绘制image的宽高.
最后, 这样果然可行.