我踩过的坑之：canvas图像模糊、有锯齿

技术点

1. canvas
2. lottie-miniprogram

背景

最近在小程序开发中遇到一个点击动效的需求，大概就是点击一个盲盒，然后盲盒会有一个抖动的效果，因为抖动完要停止动画，所以采用了微信刚支持不久的lottie-miniprogram 官方文档戳这里，结果就遇到了一个神奇的bug：

bug描述

在微信开发者工具里预览动效是很清晰的，但是到了真机上动效就模糊、有锯齿，官方github也有类似的issues戳这里 模糊效果对比大致如下：

微信开发者工具效果

真机效果

问题的原因

一句话：retina屏幕的高分辨率导致了canvas画出的图像模糊、失真、锯齿，只需要获取到当前设备的devicePixelRatio，然后将画布和宽高、canvas的上下文同时缩放devicePixelRatio倍（其实就是放大devicePixelRatio倍）即可

解决方案（直接上代码）

代码

wx.createSelectorQuery().select(`#blind-box-canvas`).node(res => {
        const canvas = res.node
        const context = canvas.getContext('2d')
        
        // 关键代码  start ！！！
	context.scale(app.globalData.devicePixelRatio,app.globalData.devicePixelRatio)
        canvas.width = 114*app.globalData.devicePixelRatio
        canvas.height = 105*app.globalData.devicePixelRatio
        // 关键代码  end ！！！
        
        lottie.setup(canvas)
        // 盲盒动效地址
        let path = `****blind_box.json`
        this.blindBoxData[i].ani = lottie.loadAnimation({
          path,
          loop: false,
          autoplay: false,
          rendererSettings: {
            context,
          },
        })
        this.blindBoxData[i].ani.setSpeed(0.8)
      }).exec()
复制代码