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;//舞台
//      初始化一个canvasstage = 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 eventsstage.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 elementvar 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();elsequestion();    //              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 eventsstartBt.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)