专注于移动端互动页面的2Dcanvas框架--canvasWF（更新中）


//创建加载资源列表 set格式 key value 一一对应
export const ResList = new Set([
    ['bg','./images/bg.png'], 
    ['bg1','./images/bg1.png'], 
    ['c1','./images/c1.png'], 
    ['c2','./images/c2.png'], 
]);

当前的资源仅仅支持的是image的素材。并且以key与value的形式存放起来。这样在我们之后使用图片的时候，就直接通过设置key从而确定我们想要渲染的是哪一样图片。

Game

核心脚本是Game，因为canvas核心渲染在这个脚本里面

gitlub地址：https://github.com/soGooday/canvasWF/blob/master/src/js/base/Game.js。

//假如当前的脚本为index.js

import {Game} from './js/base/Game';//引入Game脚本
import {ResList} from './ResList'; //引入资源注册器

//然后使用得到Game中的单例  --说明：关于对canvas的标签的创与适配。分别放在了index.html与css中
//canvas的配置设置
let gameoConfig={ 
    canvasId:'demo',//html中设置的canvas的id
    type:'canvas',//使用的类型 目前就这一个选项 后期可能会添加webgl
    create:this.create,//资源加载完毕后加载的回调方法 -可以不是这个名字
   // updata:this.updata,//实时回调更新函数 --不是用可以不写，节省性能 可以不是这个名字
    actionScope:this,//作用域传入 当前的作用域传入
}
this.game =  Game.getInstance(gameoConfig);//取到game单利  
this.game.loadRes(ResList);//将资源列表中的资源添加进来.当如才加载完毕会执行 create中的相关指令。这样我们就可以渲染素材了

Spirit

主角之一的Spirit了,用于素材的展示。可使添加使用DOTween, Collision,Button三种组件

关于素材的宽高设置，代码中使用的素材本身的宽与高。

gitLub地址：https://github.com/soGooday/canvasWF/blob/master/src/js/base/Spirit.js 里面会有更多的api的使用方法

//加入当前的脚本为index.js

import {Game} from './js/base/Game';//引入Game脚本
import {ResList} from './ResList'; //引入资源注册器

//然后使用得到Game中的单例  --说明：关于对canvas的标签的创与适配。分别放在了index.html与css中
let gameoConfig={ 
    canvasId:'demo',//html中设置的canvas的id
    type:'canvas',//使用的类型 目前就这一个选项 后期可能会添加webgl
    create:this.create,//资源加载完毕后加载的方法 
   // updata:this.updata,//实时更新函数 --不是用可以不写，节省性能
    actionScope:this,//作用域传入 当前的作用域传入
}
this.game =  Game.getInstance(gameoConfig);//取到game单利  
this.game.loadRes(ResList);//将资源列表中的资源添加进来.当如才加载完毕会执行 create中的相关指令。这样我们就可以渲染素材了
create(){ 
        //创建一幢背景图的素材  前两个的参数只素材的坐标位置 最后一个就是有两个作用
        //第一是资源注册器中的key
        //这个是用来识别创素材的唯一标识使用了。
        //在渲染，机器销毁时候，会使用到
        this.Bg = this.game.createSprite(0,0,'bg');//创建一个单一游戏体的背景图        
        //这样我们就可以渲染一个图片的素材了
    
}

Text

主角之一的Font字体的展示目前可使用DOTween组件。（目前并不支持Collision,Button）。其实添加支持很容易。只是一般不太会对字体使用这两个组件

gitLub地址：https://github.com/soGooday/canvasWF/blob/master/src/js/base/Text.js 里面会有更多的api的使用方法

//加入当前的脚本为index.js

import {Game} from './js/base/Game';//引入Game脚本
import {ResList} from './ResList'; //引入资源注册器

//然后使用得到Game中的单例  --说明：关于对canvas的标签的创与适配。分别放在了index.html与css中
let gameoConfig={ 
    canvasId:'demo',//html中设置的canvas的id
    type:'canvas',//使用的类型 目前就这一个选项 后期可能会添加webgl
    create:this.create,//资源加载完毕后加载的方法 
   // updata:this.updata,//实时更新函数 --不是用可以不写，节省性能
    actionScope:this,//作用域传入 当前的作用域传入
}
this.game =  Game.getInstance(gameoConfig);//取到game单利  
this.game.loadRes(ResList);//将资源列表中的资源添加进来.当如才加载完毕会执行 create中的相关指行 create中的相关指令。这样我们就可以渲染素材了
create(){ 
        //前两个的参数是 xy的坐标 后面是表示key。这个是用来识别创建字体的唯一标识使用了。  
        //在渲染，机器销毁时候，会使用到
        let text = Game.createFontS(376,200,'text');
        text.fontContent("测试位置");//设置字体的内容
        text.fontSize(60).fontColor('#000000');//字体的色号
        text.fontTextAlign('center'); //水平的模式
}

DOTween

组件DOTween。主要用于字体与图片的动画效果。目前支持的有。我的另一篇文章（可点击）。

gitLab地址:https://github.com/soGooday/canvasWF/blob/master/src/js/base/DOTween.js里面会有更多的api的使用方法

Linear：线性匀速运动效果；
Quadratic：二次方的缓动（t^2）；
Cubic：三次方的缓动（t^3）；
Quartic：四次方的缓动（t^4）；
Quintic：五次方的缓动（t^5）；
Sinusoidal：正弦曲线的缓动（sin(t)）；
Exponential：指数曲线的缓动（2^t）；
Circular：圆形曲线的缓动（sqrt(1-t^2)）；
Elastic：指数衰减的正弦曲线缓动；
Back：超过范围的三次方缓动（(s+1)*t^3 – s*t^2）；
Bounce：指数衰减的反弹缓动。
每个效果都分三个缓动方式，分别是：
 
easeIn：从0开始加速的缓动，也就是先慢后快；
easeOut：减速到0的缓动，也就是先快后慢；
easeInOut：前半段从0开始加速，后半段减速到0的缓动。

//加入当前的脚本为index.js

import {Game} from './js/base/Game';//引入Game脚本
import {Ease,loopType} from './js/base/DOTween'//引入Ease loopType用于设置动画组件 
import {ResList} from './ResList'; //引入资源注册器

//然后使用得到Game中的单例  --说明：关于对canvas的标签的创与适配。分别放在了index.html与css中
let gameoConfig={ 
    canvasId:'demo',//html中设置的canvas的id
    type:'canvas',//使用的类型 目前就这一个选项 后期可能会添加webgl
    create:this.create,//资源加载完毕后加载的方法 
   // updata:this.updata,//实时更新函数 --不是用可以不写，节省性能
    actionScope:this,//作用域传入 当前的作用域传入
}
this.game =  Game.getInstance(gameoConfig);//取到game单利  
this.game.loadRes(ResList);//将资源列表中的资源添加进来.当如才加载完毕会执行 create中的相关指会执行 create中的相关指令。这样我们就可以渲染素材了
create(){ 
        //前两个的参数是 xy的坐标 后面是表示key。这个是用来识别创建字体的唯一标识使用了。  
        //在渲染，机器销毁时候，会使用到
        let text = Game.createFontS(376,200,'text');
        text.fontContent("测试位置");//设置字体的内容
        text.fontSize(60).fontColor('#000000');//字体的色号
        text.fontTextAlign('center'); //水平的模式
        let textAnimaiton = text.addComponent('DOTween');//给字体使用DOTween动画
           textAnimaiton.DOScale().from({x:0.5,y:0.5}).to({x:1.5,y:1.5}).setEase(Ease.Quad.easeInOut)
            .setUseTime(1000)
            .setLoops(2,loopType.pingqang) 
            .setDelayed(0)
            .onComplete(()=>{console.log('当前的动画执行完毕了!',text.x)})//当前的动画执行完毕的回调
            .everyFrame((index)=>{console.log(index)})//期间的每帧动画的回调
            .DOAnimation();
}
//参数

Button

组件Button.目前支持的事件

gitLab地址:https://github.com/soGooday/canvasWF/blob/master/src/js/base/Button.js里面会有更多的api的使用方法

//加入当前的脚本为index.js

import {Game} from './js/base/Game';//引入Game脚本
import {ResList} from './ResList'; //引入资源注册器

//然后使用得到Game中的单例  --说明：关于对canvas的标签的创与适配。分别放在了index.html与css中
let gameoConfig={ 
    canvasId:'demo',//html中设置的canvas的id
    type:'canvas',//使用的类型 目前就这一个选项 后期可能会添加webgl
    create:this.create,//资源加载完毕后加载的方法 
   // updata:this.updata,//实时更新函数 --不是用可以不写，节省性能
    actionScope:this,//作用域传入 当前的作用域传入
}
this.game =  Game.getInstance(gameoConfig);//取到game单利  
this.game.loadRes(ResList);//将资源列表中的资源添加进来.当如才加载完毕会执行 create中的相关指令。这样我们就可以渲染素材了
create(){ 
        //创建一幢背景图的素材  前两个的参数只素材的坐标位置 最后一个就是有两个作用
        //第一是资源注册器中的key
        //这个是用来识别创素材的唯一标识使用了。
        //在渲染，机器销毁时候，会使用到
        this.Bg = this.game.createSprite(0,0,'bg');//创建一个单一游戏体的背景图        
        //这样我们就可以渲染一个图片的素材了
        let  bgButton = this.Bg.addComponent('Button'); //给背景图添加上button的按钮即可
        bgButton.addEventClick(()=>{
            console.log('点击了按钮的事件')
        })
    
}

canvas的创建

首先是再html中创建一个canvas的标签

gitLab地址:我是模板文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>我是模板文件</title>
    <script>
        //适配使用
        var docEl = document.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function () {
            var clientWidth = docEl.clientWidth || 375;
            clientWidth > 750 ? clientWidth = 750 : clientWidth = clientWidth;
            if (clientWidth){
                const fz = docEl.style.fontSize = 20 * (clientWidth / 375);
                docEl.style.fontSize = 20 * (clientWidth / 375) + 'px';
                window.remscale = clientWidth / 375;
                var realfz = ~~(+window.getComputedStyle(document.getElementsByTagName("html")[0]).fontSize.replace('px','')*10000)/10000
                if (fz !== realfz) {
                    document.getElementsByTagName("html")[0].style.cssText = 'font-size: ' + fz * (fz / realfz) +"px";
                }

            }
        };
        if (document.addEventListener){
            window.addEventListener(resizeEvt, recalc, false);
            document.addEventListener('DOMContentLoaded', recalc, false);
        } 
    </script> 
</head>
<body> 
    //创建一个canvas
    <canvas id="demo"></canvas> 
</html>

css对canvas的设置

gitLab地址:https://github.com/soGooday/canvasWF/blob/master/src/index.css


//当前素材是二倍的素材 
#demo{
    width: 18.75rem;// = 375/20
    height: 33.375rem;  // = 667/20
}

(持续更新中....)