canvas画圆角图片

<script>
var c=document.getElementById("myCanvas2");
var ctx=c.getContext("2d");
// 设置矩形参数
var x = 50; // 左边距
var y = 50; // 顶部边距
var width = 100; // 矩形宽度
var height = 50; // 矩形高度
var radius = 10; // 圆角半径

// 开始路径并移动到起点位置
ctx.beginPath();
ctx.moveTo(x + radius, y);

// 从右上角开始绘制圆角
ctx.lineTo(x+width - radius, y);
ctx.arc(x+width - radius, y + radius, radius, -Math.PI / 2, 0); // 从右边绘制圆角

// 从右下角开始绘制圆角
ctx.lineTo(x+width, y+height - radius);
ctx.arc(x+width - radius, y+height - radius, radius, 0, Math.PI / 2); // 从底部绘制圆角

// 从左下角开始绘制圆角
ctx.lineTo(x+radius, y+height);
ctx.arc(x+radius, y+height - radius, radius, Math.PI / 2, Math.PI); // 从左边绘制圆角

ctx.lineTo(x,y+radius)
ctx.arc(x+radius, y + radius, radius, -Math.PI, -Math.PI/2);
// 最后连接起点与第一条直线
ctx.closePath();
// clip方法重要
ctx.clip();
ctx.drawImage(img, x, y, width, height );
ctx.restore()
</script>