canvas绘制圆角矩形,canvas绘制圆形图片

　　如果你要画的网页包含一个弧形头像的画布图片，但是头像本身是方形的，你需要以下方法：

　　首先获取头像在画布上的坐标和宽高：(这里不具体介绍如何获取)

　　设{avatarX，avatarY，avatarW，avatarH}={20，20，80，80 }；然后只需调用下面的函数：

　　let Canvas=document . createelement( Canvas )；let CTX=canvas . get context( 2d )；设头像=新图像()；avatar.src=./src/xx . png ；avatar . onload=(scale by=2)={ circleImg(CTX，avatar，avatarX * scaleBy，avatarY * scaleBy，avatar w * scale by/2)；}//r:半径函数圆img (CTX，img，x，y，r){ CTX . save()；var d=2 * r；var CX=x r；var cy=y r；ctx.arc(cx，cy，r，0，2 * Math。PI)；CTX . clip()；ctx.drawImage(img，x，y，d，d)；CTX . restore()；}以上是本文的全部内容。希望对大家的学习和支持有帮助。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。