【canvas】导入图片/字体（游戏前置）

canvas游戏加载图片需求

1.游戏开始之前必须加载完所有要用的图片/字体(缓存文件数据，方便后面代码同步执行)
2.加载的文件必须精准知道加载结束时间并给出方便后续使用的数据
PS:字体可能在css里需要使用，虽然不必在乎渲染顺序，但是需要渲染出来
音频文件也可以用类似方法预加载（但是因为ios的安全机制所以行不通，但有解决方法）

使用原理

1.浏览器的缓存机制是，只要相同的地址，请求一次后，数据就放入缓存待用
2.用js函数的方式生成dom，预加载图片数据（dom不进行渲染，只是存在缓存中）

使用相关方法

1. new image() 解决图片加载问题
2. async … await … 解决图片加载异步的问题

export default async function(loadArr,progressFn){ //载入图片
    let num = 0;

    function loadAfter(progressFn){
        num++
        progressFn&&progressFn((num/loadArr.length).toFixed(2))
    }

    function loadImg(url,progressFn){
        let img = new Image();
        return new Promise((resolve, reject)=>{
            img.src = url;
            img.onload = function(){
                resolve(this)
                loadAfter(progressFn)
            }
        })
    }
    function loadFont(fontName,url,progressFn){
        let font = new FontFace(fontName, `url(${url})`);
        return new Promise((resolve, reject)=>{
            font.load().then(() =>{
                resolve(font)
                loadAfter(progressFn)
                document.fonts.add(font);
                document.body.classList.add("fonts-loaded");
            })
        })
    }

    let staticObj={}
      for( let i = 0; i < loadArr.length; i++ ){
        let Obj = {
            ...loadArr[i],
        }
        if(loadArr[i]['type'] == 'img'){
            Obj.Obj = await loadImg(loadArr[i]['url'],progressFn)
        }
        if(loadArr[i]['type'] == 'font'){
            Obj.Obj = await loadFont(loadArr[i]['code'],loadArr[i]['url'],progressFn)
        }
        staticObj[loadArr[i]['code']] = Obj
    }
    return staticObj;
}

参数

类型：Array
举例：

[
  {
  	code:'img1',//图片的唯一代号
    url:'../img.png',//图片地址
    …//其他自定义属性
  },
  …
]

返回

类型：Object
举例：

{
	img1:{
  	img:<img>,//通过参数的url生成的imgDOM对象
    code:'img1',//图片的唯一代号，同时也是当前属性名
    …//其他自定义属性
  }
}

注意点

因为用到了async await，因此使用时调用的函数和返回此方法的数据也要使用

UNIAPP版本稍微不同

export default async function(loadArr){ //载入图片
    function loadImg(url){
        return new Promise((resolve, reject)=>{
            uni.downloadFile({
            url,
            success(res){
              resolve(res.tempFilePath)
            }
          })
        })
    }

    let staticObj={}
      for( let i = 0; i < loadArr.length; i++ ){
        staticObj[loadArr[i]['code']] = {
          ...loadArr[i],
          img:await loadImg(loadArr[i]['url'])
        }
    }
    console.log(staticObj,'所有图片载入完成')
    return staticObj;
}

最后

以上就是花痴紫菜为你收集整理的【canvas】导入图片_字体（游戏前置）【canvas】导入图片/字体（游戏前置）的全部内容，希望文章能够帮你解决【canvas】导入图片_字体（游戏前置）【canvas】导入图片/字体（游戏前置）所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。