阅读 2138

我踩过的坑之: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()
复制代码
文章分类
前端
文章标签