绘制圆角头像

发布于 7 年前作者 xiulan4611282 次浏览最后编辑 7 年前来自 ask

用 drawImage 在 canvas 里加入用户头像,请问怎么把头像绘制成圆角?多谢了!

10 回复
fanglong
fanglong1 楼6 年前

circleImg(ctx, img, x, y, r) {    ctx.save();    var d =2 * r;    var cx = x + r;    var cy = y + r;    ctx.arc(cx, cy, r, 0, 2 * Math.PI);    ctx.clip();    ctx.drawImage(img, x, y, d, d);    ctx.restore();  }

jing35
jing352 楼6 年前

哈哈~  那也是临时方案!   我在 setshadow 后咋不起作用?兄台的是怎么设置 border 和 shadow 的?

lichao
lichao3 楼6 年前

哇~  我们是服务端合成下发的!然后现在微信新版本fix 掉这个问题了,我们就想放在前端来做这个事!你那边也加了border 和 shadow吗,求仁兄分享!

chao23
chao234 楼6 年前

就只有这一段代码吗?有详细点的代码吗?

chaoxue
chaoxue5 楼6 年前

这个很容易理解了。。。还要多详细啊。

jing83
jing836 楼6 年前
ctx.setFillStyle('red')
ctx.setShadow(10, 50, 50, 'blue')
ctx.fillRect(10, 10, 150, 75)
ctx.draw()
tyuan
tyuan7 楼6 年前

你好, 有实例代码?

huangping
huangping8 楼6 年前

真好啊。我们是前端自己生成的。

oxiang
oxiang9 楼6 年前

多谢,可以啦,

lei08
lei0810 楼5 年前

我以前也是这样做的啊 可是 微信客户端有两个版本有问题 ,保存不了图片,我们就先隐藏掉这个功能了