微信小程序使用lottie-miniprogram插件。显示json格式的动画，手机上锯齿模糊问题

https://github.com/wechat-miniprogram/lottie-miniprogram

使用办法

1. 通过 npm 安装：

npm install --save lottie-miniprogram

2. 传入 canvas 对象用于适配

<canvas id="canvas" type="2d"></canvas>

wxss
覆盖默认的小程序的canvas的宽高样式
#canvas{
   width:120rpx;
   height:120rpx;
}

import lottie from 'lottie-miniprogram'

Page({
  onReady() {
        wx.createSelectorQuery().select('#canvas').node(res => {
            const canvas = res.node
            const context = canvas.getContext('2d')
//避免出现锯齿问题，要写下面的代码
            context.scale(this.getPixelRatio(),this.getPixelRatio())
            canvas.width = 120*this.getPixelRatio()  //120是图片的宽度
            canvas.height = 120*this.getPixelRatio()  //120是图片的高度

            lottie.setup(canvas)
            lottie.loadAnimation({
                loop: true,
                autoplay: true,
                //远程动画。一定要把json格式的文件放到服务器中，并且注意域名是合法的
                path:"htttps//........a.json",
                rendererSettings: {
                    context,
                },
            })
        }).exec()
    },

//获取设备的像素比
    getPixelRatio(){
        let pixelRatio = 0
        wx.getSystemInfo({
            success: function (res) {
                pixelRatio = res.pixelRatio
            },
            fail: function () {
                pixelRatio = 0
            }
        })
        return pixelRatio
    },
})

注意

1，如果出现开发者工具看的很完美但是手机上出现锯齿的问题。肯定是你少写了计算设备像素比。

2，样式也是必不可少的。否则可能会比你预想的大。

3，json文件可以向设计要，并且要传服务器上成为网络地址，域名要是合法的。