微信小游戏——绘制圆形微信头像

最新推荐文章于 2025-06-24 15:14:08 发布

原创最新推荐文章于 2025-06-24 15:14:08 发布 · 3.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#微信小游戏

微信小游戏同时被 2 个专栏收录

6 篇文章

订阅专栏

微信小游戏开发经验

4 篇文章

订阅专栏

本文介绍了一种使用canvas API在JavaScript中实现圆形裁剪的技术。通过保存和恢复上下文、开始路径、绘制圆形并将其用作裁剪区域，然后将图片绘制到这个圆形区域内，实现了图片的圆形显示效果。

直接上代码：

ctx.save() //保存上下文
ctx.beginPath()//开始绘制
ctx.arc(screenWidth / 10, screenHeight / 7, 24, 0, 2 * Math.PI, false)//画一个圆
ctx.clip()//裁剪这个圆
ctx.drawImage(image, screenWidth / 10 - 25, screenHeight / 7 - 25, 50, 50)//将图片绘制进圆
ctx.restore()//恢复上下文  接下来可以进行其他绘制操作

效果图：