uni-app canvas createPattern 无效

uni-app canvas createPattern 无效

操作步骤：

<canvas canvas-id="canvas" style="width: 100%; height: 750rpx;"></canvas>

const ctx = uni.createCanvasContext('canvas')  
const url = '/static/logo.png'  
ctx.setFillStyle('#007AFF')  
uni.getImageInfo({  
    src:url,  
    success(res) {  
        console.log('res', res)  
        ctx.save()  
        const pattern = ctx.createPattern(res.path, 'repeat-x')  
        ctx.setFillStyle(pattern)  
        // ctx.fillStyle = pattern  
        ctx.fillRect(0, 0, 300, 150)  
        ctx.restore()  
        ctx.draw()  
    }  
})

预期结果：

  • createPattern生效

实际结果：

  • 不生效

bug描述：

canvas createPattern 不生效！


更多关于uni-app canvas createPattern 无效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

5 回复

问题已记录，已加分，感谢您的反馈！

更多关于uni-app canvas createPattern 无效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


预计下版带上

果然不是我一个人遇到，渲染出来一片黑！！！

HBuilderX alpha 3.2.5+ 已修复

在uni-app中使用createPattern时，需要注意以下几点：

  1. 路径问题：createPattern的第一个参数需要是本地临时文件路径或网络图片URL。你代码中使用的res.path已经是正确的本地路径，但需要确认该路径是否有效。可以在success回调中打印res.path检查。

  2. 时机问题：createPattern必须在图片加载完成后调用。你的代码已经将createPattern放在getImageInfo的success回调中，这是正确的。

  3. API兼容性：uni-app的canvas API基于小程序规范，createPattern在小程序基础库2.9.0+才支持。请确认你的微信开发者工具基础库版本和真机基础库版本都符合要求。

  4. 绘制顺序：你的代码中ctx.draw()在success回调中调用是正确的，但建议在fillRect后立即调用ctx.draw()。

  5. 常见解决方案：

    • 检查图片路径是否正确
    • 确认基础库版本是否支持
    • 尝试使用绝对路径：/static/logo.png改为/static/logo.png（你已使用）
    • 可以先尝试用纯色填充测试canvas是否正常工作

建议修改代码为：

uni.getImageInfo({
    src: '/static/logo.png',
    success: (res) => {
        console.log('图片路径:', res.path)
        const pattern = ctx.createPattern(res.path, 'repeat')
        ctx.setFillStyle(pattern)
        ctx.fillRect(0, 0, 300, 150)
        ctx.draw(true) // 传入true强制重绘
    },
    fail: (err) => {
        console.error('获取图片失败:', err)
    }
})
回到顶部