canvas基础知识补齐一下，明白了原理便很简单。
先使用.arc绘制一个圆圈，通过.clip裁剪，绘制在圆圈内的内容会出现，其他的都会隐藏。.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/5b7cecd7e51d4538e3318f27function 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-topctx.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-rightctx.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-bottomctx.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-leftctx.lineTo(x, y + r)ctx.lineTo(x + r, y)// 这里是使用 fill 还是 stroke都可以，二选一即可，但是需要与上面对应ctx.fill()// ctx.stroke()ctx.closePath()// 剪切ctx.clip()}
