H5画布

原生convas

创建画布

var canvas =document.getElementById('canvas');
//自适应屏幕大小
cw=canvas.width=document.documentElement.clientWidth;
ch=canvas.height=document.documentElement.clientHeight;
var ctx = canvas.getContext('2d');

ctx.fillStyle = 'green';
ctx.fillRect(0, 0, cw, ch);

往画布添加图片和文字

//加载图片,支持多张图片叠加
function img(src,x,y,width,height,func){
var beauty = new Image();  
beauty.src =src ; 
beauty.onload = function(){
    if(width==''||height=='')//原样显示
    ctx.drawImage(beauty, x, y);
    else
ctx.drawImage(beauty, x, y,width,height); 
func();
  }
}



//加载文字
function text(str,size,x,y){
ctx.font=size+"px 黑体 bold";
ctx.strokeText(str,x,y);
}

依次在画布显示内容

function step(x){
    switch(x){
        case 0:
//      通过在函数里嵌套函数来设置画布绘制顺序，新绘制的会覆盖之前绘制的
        img("bg.jpg",0,0,cw,ch,function(){img("1.png",0,0,1000,500,function(){});img("2.png",0,1100,300,300,function(){})});
break;
        case 1:
        arr = [
        {},{},
  {x:155, y:700, width:100, height:100},
  {x:555, y:700, width:200, height:100}
];

    X=num;
    //一入回调深似海
 $.getJSON ("question.json", function (data)  //读取json文件的内容
        {   
dt=new Array(data.RandomQues[X].Question,data.RandomQues[X].Answers[0].Description,data.RandomQues[X].Answers[0].Score,data.RandomQues[X].Answers[1].Description,data.RandomQues[X].Answers[1].Score);

img("bg2.jpg",0,0,cw,ch,function(){text(dt[0],80,11,366);text(dt[1],80,155,800);
        text(dt[3],80,555,800);});  
        });  

        num++;
        break;
        case 2:
    dt= Ajax(num);
        img("bg2.jpg",0,0,cw,ch,function(){text(dt[0],80,11,366);text(dt[1],80,155,800);
        text(dt[3],80,555,800);});
        break;
        case 3:

        img("bg2.jpg",0,0,cw,ch,function(){text("222",80,11,366);text("是",80,155,800);
        text("不是",80,555,800);});
        break;


        default:ctx.clearRect(0, 0, canvas.width, canvas.height);//清空画板


    }



}

插件调用convas

使用阿里的画布插件hilo-standalone.js

预加载资源

//预加载图片
  function  load(){
        var resources = [
            {id:'bg', src:'images/bg.png'},
            {id:'bhh', src:'images/bhh.png'},
            {id:'mh', src:'images/mh.png'},
            {id:'md', src:'images/md.png'},
            {id:'www', src:'images/www.png'},
            {id:'frh', src:'images/frh.png'},
            {id:'ml', src:'images/ml.png'},
             {id:'title', src:'images/1.png'},
              {id:'button', src:'images/2.png'}
        ];

        this.queue = new Hilo.LoadQueue();
        this.queue.add(resources);
        this.queue.on('complete', this.onComplete.bind(this));
        this.queue.start();
    }

//当所有资源下载完成时发生
    onComplete=function(){
//      通过queue.get(id).content来获取指定id的图片素材下载完成后的Image对象

console.log("file load fine!!!");



        this.bg = this.queue.get('bg').content;
        this.bhh = this.queue.get('bhh').content;
        this.mh = this.queue.get('mh').content;
        this.md = this.queue.get('md').content;
        this.www = this.queue.get('www').content;      
        this.frh = this.queue.get('frh').content;
        this.ml = this.queue.get('ml').content;

         this.title = this.queue.get('title').content;
          this.button = this.queue.get('button').content;



        document.body.appendChild(stage.canvas);
        init();
    }

初始化插件

$(function(){

screenW=document.documentElement.clientWidth-3;
screenH=document.documentElement.clientHeight-3;

            //舞台
//      初始化一个canvas
 stage = new Hilo.Stage({
    renderType:'canvas',
    width: screenW,
    height: screenH
});

 load();
})

初始化场景

 init= function(){


        //背景     
        console.log(screenW+"|"+screenH)
        //由于背景是不变的，为了减少canvas的重复绘制，我们采用DOM+CSS来设置背景。先创建一个div，设置其CSS背景为游戏背景图片，再把它加入到舞台的canvas后面
     document.body.insertBefore(Hilo.createElement('div', {
            id: 'bg',
            style: {
                background: 'url(images/bg.png) no-repeat',
                backgroundSize: '100% 100%',
                position: 'absolute',            
                width: screenW + 'px',
                height: screenH + 'px'                
            }
        }), stage.canvas);

//开启画板刷新，从而加载图形
   var ticker = new Hilo.Ticker(60);
            ticker.addTick(stage);
            ticker.start();


 //enable dom events
            stage.enableDOMEvent([Hilo.event.POINTER_START, Hilo.event.POINTER_MOVE, Hilo.event.POINTER_END]);


      buttonini();


    }

打印文字

text=function(str,size,x,y,width,height){
var font = size+"px arial";

   //text wrapped in dom element
            var elem = new Hilo.DOMElement({
                element: Hilo.createElement('div', {
                    innerHTML: str,
                    style: {
                        position: 'absolute',
                        font: font,
                        color:'#ffffff'
                    }
                }),
                width:width,
                height:height,
                x: x,
                y: y,
            }).addTo(stage);
       }

json变量

var data={
            "RandomQues":[
            {'Question':'你喜欢一个人独自旅行吗',
            'Answers':[{'Description':'yes','Score':1},{'Description':'no','Score':2}]
             },
            {'Question':'你每星期都会去逛街吗？',
            'Answers':[{'Description':'yes','Score':3},{'Description':'no','Score':4}]
        },
        {'Question':'你认为女人最重要的是婚姻吗？',
            'Answers':[{'Description':'yes','Score':3},{'Description':'no','Score':1}]
        }     
            ],
            "Level":[{
        "Lid":"0",
        "Description":"芙蓉花语：幸福、早熟“清水出芙蓉，天然去雕饰。”如果你是这一朵花，那么你一定是闭月羞花之容，倾国倾城之貌的美女，并且透露着知性的芬芳。在你生命中，最不可能缺少的就是爱情了。你的一缕秋波会令无数的男人心生荡漾。然而你又是优雅并婉转的女人，不会有卡门的火辣，有的只是莞尔一笑，却一笑倾城。你是个冷静及埃考的人，凡是喜欢追根究底，直至找出真正的原因才会作罢。同时，属于这朵花的人大多早熟，而周围的朋友看起来会像个小孩子似的。因此，连爱的对象都会选择年纪较自己大的倾向。"
    },{
        "Lid":"1",
        "Description":"茉莉花语：你是我的，表示忠贞与尊敬茉莉花沉静、优雅，有一种发自内在的不张扬的美，但恰恰是这份不张扬，让它的美更加历久弥新。如果你是这种花，那么你一定沉稳淡雅，却在岁月的积淀中散发出令人不可抵挡的魅力。茉莉，就像一个稚嫩无知的小女人，无意地抓住勒每个男人的心。那是种很难解释清楚的无形魅力。在你身边的每一个人都会感受到你的魅力与淡定，与美貌无关，与年龄无关，却是沁人心脾的。"
    },{
        "Lid":"2",
        "Description":"梅花花语：坚贞、忠实、澄澈、慈爱、高雅梅花在中国与松、竹并称为“岁寒三友”。古往今来咏花的诗词歌赋，以梅的主题者最多。如果你当选了这朵花的女人，从表面上看，你应该是坚强并保守的，甚至你周围的朋友都会以为你清冷的有些孤傲。但是你却是有非同寻常的热情在面对着生活，那热情如同雪中一束红梅，在你的心底更有着对世间一切最纯真想法。正如被雪水侵染过去呈现出的梅花最纯净的颜色。你友情却不多情，你可以改变却不善变，走近你的一定是注定幸福的男子。"
    },{
        "Lid":"3",
        "Description":"勿忘我花语：不要忘记我的爱、永不变心、喜悦勿忘我原产于地中海沿岸至小亚细亚一带，在花店总是担任配花的角色。紫色的小花，简约而大方，笔直而坚强，永远悄然地装点着其他的花卉。如果你是这朵花，那么你一定是像张爱玲般才华横溢却可以看淡一切的女人，永远用清晰的眼光看着时间的纷扰，却没有避开懦弱，永远用冷静的理智看着情场上的春来春去，却没有逃避。一定有那么一个男人，很多年后回想往事，才明白你是他心中永不磨灭的勿忘我。"
    },{
        "Lid":"4",
        "Description":"百合花语：心想事成、祝福、高贵、清纯、百年好合你有着清纯的品格。你对爱情有点迟钝，是属于晚熟的类型。整体而言，就像百合的花语“纯洁”。对家人与自己所珍惜的人，你会全心全意地付出。你会喜欢的男性，是性格纤细、有艺术家气质的类型。你对恋爱有着少女漫画般的憧憬，容易被他身上的危险魅力所吸引。他把性情温柔的你当成“理想女性”的典型。在思考结婚的时候，你会比较偏向接受亲人与好友的推荐，选择一个家世与收入都可靠的对象。即使那个对象是一个性格大方而开阔的人。"
    },{
        "Lid":"5",
        "Description":"牡丹花语：骄傲、满意、喜悦、富贵牡丹是中国的玫瑰，和玫瑰最大的不同，是因为它传统。一个艳丽的花朵上加上一份恒久的传统积累，是怎样的厚重的美丽。如果你当选了这朵女人花，你一定是雍容华贵的，即使你是忙碌的上班族，也可以从你朝九晚五的工作中散发出传统并高贵的魅力。艳丽如你，传统也如你，你不会放纵自己，也不会因为不值得的事情虐待自己。你喜欢事业有成的稳重男士，但当真正的爱情降临到你身上的时候，你对爱情的执著会抛开一切世俗的观点，执意爱得轰轰烈烈。"}]

        }

绑定点击事件

  yes.on(Hilo.event.POINTER_START, function(e){
//              console.log(e.type, this);
            }).on(Hilo.event.POINTER_MOVE, function(e){
//              console.log(e.type, this);
            }).on(Hilo.event.POINTER_END, function(e){  
                stage.removeChild(title)
                stage.removeChild(yes)
                stage.removeChild(no)
                num++;
                score+=rt[2];
                if(num>5)
                overS();
                else
                question();    

//              console.log(e.type);
            });

添加图像

var startBt = new Hilo.Button({
       id: '',
          width: screenW*0.3,
         height: screenH*0.2,
    image: this.button,
//  upState: {rect:[0, 0, 64, 64]},
//  overState: {rect:[0, 22, 64, 64]},
//  downState: {rect:[0,33, 64, 64]},
//  disabledState: {rect:[0,3, 64, 64]},
       x:screenW*0.3, 
       y: screenH*0.7
}).addTo(stage);

给图像绑定事件

     //bind pointer events
            startBt.on(Hilo.event.POINTER_START, function(e){
                console.log(e.type, this);
            }).on(Hilo.event.POINTER_MOVE, function(e){
                console.log(e.type, this);
            }).on(Hilo.event.POINTER_END, function(e){

                $("#bg").css({"background":'url("images/bhh.png") 0% 0% / 100% 100% no-repeat',"position":"absolute","width":screenW,"height":screenH})    

                console.log(e.type, this);
            });

移除图像

stage.removeChild(startBt)