uni-app uni canvas绘制图片drawImage 设置圆角问题

uni-app uni canvas绘制图片drawImage 设置圆角问题

操作步骤：

const context = uni.createCanvasContext('myCanvas')  

uni.getImageInfo({  
    url: 'https://qiniu.zdjt.com/xxtx/crm/2024-11-21/1732176014345.png',  
    success: function (res) {  
context.save()  
context.beginPath()  
context.arc(96, 96, 48, 0, 2 * Math.PI)  
context.clip()  
context.drawImage(res.tempFilePath, 48, 48)  
        context.restore()  
        context.draw()  
    }  
})

预期结果：

真机小程序头像圆角显示正常

实际结果：

开发工具头像圆角显示正常，发布到体验版圆角没反应

bug描述：

arc 画的圆，微信开发工具上头像圆角显示正常；小程序发布到体验版，头像圆角没反应
项目信息 详细信息
产品分类 uniapp/小程序/微信
PC开发环境操作系统 Mac
PC开发环境操作系统版本号 26.0.1 (25A362)
HBuilderX类型 正式
HBuilderX版本号 4.76
第三方开发者工具版本号 1.06.2504030
基础库版本号 3.10.0
项目创建方式 HBuilderX

image image


更多关于uni-app uni canvas绘制图片drawImage 设置圆角问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

10 回复

已解决，最初圆角白色底图用了一次 clip，后来头像的 clip 没生效，在 ios 中

更多关于uni-app uni canvas绘制图片drawImage 设置圆角问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html


试试原生微信小程序有没有这个问题

我整个项目用的 uni 做的，意思是还需要原生做一下，发布再验证一下这个问题？

回复 瑶今: 找到编译的产物，在开发者工具里把 uni.createCanvasContext 改成 wx.createCanvasContext 测试一下原生API是否也有这个问题

回复 DCloud_UNI_JBB: 收到，谢谢。

原生 API 也有这个问题。。

可以去微信社区看看有没有解决方案

回复 DCloud_UNI_JBB: 收到，谢谢

安卓小程序圆角正常

这是一个典型的Canvas绘制兼容性问题。开发工具与真机环境存在差异，主要原因是clip()方法在不同环境下的执行时机不一致。

建议改用以下方案实现圆角图片：

const context = uni.createCanvasContext('myCanvas')

uni.getImageInfo({
    url: 'your-image-url',
    success: function (res) {
        // 方案1：使用圆角矩形路径替代clip
        context.beginPath()
        context.arc(96, 96, 48, 0, 2 * Math.PI)
        context.closePath()
        context.stroke()
        context.clip()
        
        // 确保图片加载完成后再绘制
        context.drawImage(res.path, 48, 48, 96, 96)
        context.draw(true) // 传入true确保同步绘制
    },
    fail: function(err) {
        console.log('图片加载失败', err)
    }
})

或者使用更稳定的方案：

// 使用createPattern创建圆角效果
const radius = 48
context.beginPath()
context.arc(96, 96, radius, 0, 2 * Math.PI)
context.fillStyle = context.createPattern(res.path, 'no-repeat')
context.fill()
context.draw(true)
回到顶部