canvas 图片圆角问题

引子

近期的工作中，是继 canvas 设置边框问题 之后碰到的第 4 个问题。

• Origin
• My GitHub

图片圆角问题

如果只是想要显示圆角的效果，设置 border-radius 就可以了，但如果要让 canvas 合成的图片显示为圆角，这种 css 方式不行。这是示例，扫描访问二维码如下。

在网上查询资料，发现同样的问题，解决的方式是用 canvas 的裁剪功能。

解决方法

先画布上画一个有圆角的矩形，然后使用裁剪的方式 clip()。

// 生成有圆角的矩形
function drawRoundedRect(cxt, x, y, width, height