<canvas id="canvas" width="500" height="500" style="border: 1px solid red;"></canvas>

<img src="./dialog.png" id="img" />

let c=document.getElementById('canvas');

let img=document.getElementById('img')

let context=c.getContext('2d');

// 图片加载

img.onload = function(e){

	 console.log('图片加载成功',e)

	 drawRoundedImg(50,100,100,100,50,img);

}

// 你会需要一张背景

function backGround(){

    context.save();

    context.fillStyle="#FFFFFF"

    context.fillRect(x,y,w,h);

    context.restore();

}

// 你可能还需要生成一些文字

function text(){

    context.save();

    context.fillStyle="black";

    context.font="25px 微软雅黑";

    context.fillText('踏步走',x,y); // 名字

    context.restore();

}

// 生成一张圆在插入图片

function drawRoundedImg(x,y,w,h,r,bgimg){

	context.save();

	context.beginPath();

	context.moveTo(x+r,y);

	context.arcTo(x+w,y,x+w,y+h,r);

	context.arcTo(x+w,y+h,x,y+h,r);

	context.arcTo(x,y+h,x,y,r);

	context.arcTo(x,y,x+w,y,r);

	context.lineWidth = 1;//线条的宽度

	context.strokeStyle = "red";//线条的颜色

	context.stroke();

	context.clip();

	context.drawImage(bgimg, x, y, w, h);

	context.restore();

	context.closePath();

}