微信小程序canvas把正方形图片绘制成圆形

最新推荐文章于 2025-06-07 10:24:25 发布

胜天一子半

最新推荐文章于 2025-06-07 10:24:25 发布

阅读量1.5w

点赞数 1

CC 4.0 BY-SA版权

分类专栏：微信小程序文章标签： canvas

本文链接：https://blog.youkuaiyun.com/qq_37942845/article/details/80054239

微信小程序专栏收录该内容

19 篇文章

订阅专栏

本文介绍如何在微信小程序中使用canvas实现图片的圆形裁剪效果。通过保存和恢复绘图状态、绘制圆形并进行剪切，最终将指定图片显示在设定的圆形区域内。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在微信小程序里效果图：

直接代码：

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

//index.js
Page({
    data: {
        image: {
            src: "/1.png",
            width: 200,
            heigth: 200
        }
    },
    onLoad: function () {
        let that = this;
        var contex = wx.createCanvasContext('firstCanvas')
        contex.save(); // 先保存状态 已便于画完圆再用
        contex.beginPath(); //开始绘制
        //先画个圆
        contex.arc(100, 100, 100, 0, Math.PI * 2, false);
        contex.clip();//画了圆 再剪切  原始画布中剪切任意形状和尺寸。一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内
        contex.drawImage(that.data.image.src, 0, 0, that.data.image.width, that.data.image.heigth); // 推进去图片
        contex.restore(); //恢复之前保存的绘图上下文 恢复之前保存的绘图上下午即状态 可以继续绘制
        contex.draw();
    }
})