0

现在需要给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);
Nisus 140
2018-04-02 提问
3 个回答
0

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

0

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

0

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

撰写答案

推广链接