微信小程序canvas绘制圆形图片

canvas基础知识补齐一下，明白了原理便很简单。

1. 先使用.arc绘制一个圆圈，通过.clip裁剪，绘制在圆圈内的内容会出现，其他的都会隐藏。
2. .drawImage的绘制位置是相对原画布，而不是圆圈，这个不知道的画很坑啊。只要绘制图片的位置再圆圈内便会出现。

//保存上文
targetCtx.save()
targetCtx.beginPath()
targetCtx.arc(110, 60, 30, 0, 2 * Math.PI)	//绘制圆圈
targetCtx.clip()	//裁剪
targetCtx.drawImage("/image/111.jpg",80,30,60,60)	//定位在圆圈范围内便会出现
targetCtx.restore()
//恢复上文内容，绘制其他
targetCtx.draw();

//圆角方形是查资料的时候发现的，亲测可用，原文多画了一笔我已经删了，原文https://juejin.im/post/5b7cecd7e51d4538e3318f27
function roundRect(ctx, x, y, w, h, r) {
 // 开始绘制
 ctx.beginPath()
 // 因为边缘描边存在锯齿，最好指定使用 transparent 填充
 // 这里是使用 fill 还是 stroke都可以，二选一即可
 ctx.setFillStyle('transparent')
 // ctx.setStrokeStyle('transparent')
 // 左上角
 ctx.arc(x + r, y + r, r, Math.PI, Math.PI * 1.5)
 
 // border-top
 ctx.moveTo(x + r, y)
 ctx.lineTo(x + w - r, y)
 // 右上角
 ctx.arc(x + w - r, y + r, r, Math.PI * 1.5, Math.PI * 2)
 
 // border-right
 ctx.lineTo(x + w, y + h - r)
 ctx.lineTo(x + w - r, y + h)
 // 右下角
 ctx.arc(x + w - r, y + h - r, r, 0, Math.PI * 0.5)
 
 // border-bottom
 ctx.lineTo(x + r, y + h)
 ctx.lineTo(x, y + h - r)
 // 左下角
 ctx.arc(x + r, y + h - r, r, Math.PI * 0.5, Math.PI)
 
 // border-left
 ctx.lineTo(x, y + r)
 ctx.lineTo(x + r, y)
 
 // 这里是使用 fill 还是 stroke都可以，二选一即可，但是需要与上面对应
 ctx.fill()
 // ctx.stroke()
 ctx.closePath()
 // 剪切
 ctx.clip()
}

最后

以上就是真实芝麻为你收集整理的微信小程序canvas绘制圆形图片的全部内容，希望文章能够帮你解决微信小程序canvas绘制圆形图片所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。