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

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

clipboard.png

绘制完成后的效果:

clipboard.png

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

部分代码

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

var image = new Image();
image.src = "../img/mubiao.png";
...
var ctx = canvas.getContext("2d");
ctx.drawImage(image,dx,dy);
阅读 1.6k
评论 更新于 2018-04-04
    3 个回答
    李十三
    • 11.2k

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

    评论 赞赏 2018-04-02

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

      评论 赞赏 2018-04-03
        Nisus
        • 147

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

        评论 赞赏 2018-04-10
          撰写回答

          登录后参与交流、获取后续更新提醒