原生convas

創(chuàng)建畫(huà)布

var canvas =document.getElementById('canvas');
//自適應(yīng)屏幕大小
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);

往畫(huà)布添加圖片和文字

//加載圖片,支持多張圖片疊加
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);
}

依次在畫(huà)布顯示內(nèi)容

function step(x){switch(x){case 0:
//      通過(guò)在函數(shù)里嵌套函數(shù)來(lái)設(shè)置畫(huà)布繪制順序，新繪制的會(huì)覆蓋之前繪制的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;//一入回調(diào)深似海$.getJSON ("question.json", function (data)  //讀取json文件的內(nèi)容{   
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);//清空畫(huà)板}}

插件調(diào)用convas

使用阿里的畫(huà)布插件hilo-standalone.js

預(yù)加載資源

//預(yù)加載圖片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();}//當(dāng)所有資源下載完成時(shí)發(fā)生onComplete=function(){
//      通過(guò)queue.get(id).content來(lái)獲取指定id的圖片素材下載完成后的Image對(duì)象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;//舞臺(tái)
//      初始化一個(gè)canvasstage = new Hilo.Stage({renderType:'canvas',width: screenW,height: screenH
});load();
})

初始化場(chǎng)景

 init= function(){//背景     console.log(screenW+"|"+screenH)//由于背景是不變的，為了減少canvas的重復(fù)繪制，我們采用DOM+CSS來(lái)設(shè)置背景。先創(chuàng)建一個(gè)div，設(shè)置其CSS背景為游戲背景圖片，再把它加入到舞臺(tái)的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);//開(kāi)啟畫(huà)板刷新，從而加載圖形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':'你喜歡一個(gè)人獨(dú)自旅行嗎','Answers':[{'Description':'yes','Score':1},{'Description':'no','Score':2}]},{'Question':'你每星期都會(huì)去逛街嗎？','Answers':[{'Description':'yes','Score':3},{'Description':'no','Score':4}]},{'Question':'你認(rèn)為女人最重要的是婚姻嗎？','Answers':[{'Description':'yes','Score':3},{'Description':'no','Score':1}]}     ],"Level":[{"Lid":"0","Description":"芙蓉花語(yǔ)：幸福、早熟“清水出芙蓉，天然去雕飾?！比绻闶沁@一朵花，那么你一定是閉月羞花之容，傾國(guó)傾城之貌的美女，并且透露著知性的芬芳。在你生命中，最不可能缺少的就是愛(ài)情了。你的一縷秋波會(huì)令無(wú)數(shù)的男人心生蕩漾。然而你又是優(yōu)雅并婉轉(zhuǎn)的女人，不會(huì)有卡門的火辣，有的只是莞爾一笑，卻一笑傾城。你是個(gè)冷靜及?？嫉娜?#xff0c;凡是喜歡追根究底，直至找出真正的原因才會(huì)作罷。同時(shí)，屬于這朵花的人大多早熟，而周圍的朋友看起來(lái)會(huì)像個(gè)小孩子似的。因此，連愛(ài)的對(duì)象都會(huì)選擇年紀(jì)較自己大的傾向。"},{"Lid":"1","Description":"茉莉花語(yǔ)：你是我的，表示忠貞與尊敬茉莉花沉靜、優(yōu)雅，有一種發(fā)自內(nèi)在的不張揚(yáng)的美，但恰恰是這份不張揚(yáng)，讓它的美更加歷久彌新。如果你是這種花，那么你一定沉穩(wěn)淡雅，卻在歲月的積淀中散發(fā)出令人不可抵擋的魅力。茉莉，就像一個(gè)稚嫩無(wú)知的小女人，無(wú)意地抓住勒每個(gè)男人的心。那是種很難解釋清楚的無(wú)形魅力。在你身邊的每一個(gè)人都會(huì)感受到你的魅力與淡定，與美貌無(wú)關(guān)，與年齡無(wú)關(guān)，卻是沁人心脾的。"},{"Lid":"2","Description":"梅花花語(yǔ)：堅(jiān)貞、忠實(shí)、澄澈、慈愛(ài)、高雅梅花在中國(guó)與松、竹并稱為“歲寒三友”。古往今來(lái)詠花的詩(shī)詞歌賦，以梅的主題者最多。如果你當(dāng)選了這朵花的女人，從表面上看，你應(yīng)該是堅(jiān)強(qiáng)并保守的，甚至你周圍的朋友都會(huì)以為你清冷的有些孤傲。但是你卻是有非同尋常的熱情在面對(duì)著生活，那熱情如同雪中一束紅梅，在你的心底更有著對(duì)世間一切最純真想法。正如被雪水侵染過(guò)去呈現(xiàn)出的梅花最純凈的顏色。你友情卻不多情，你可以改變卻不善變，走近你的一定是注定幸福的男子。"},{"Lid":"3","Description":"勿忘我花語(yǔ)：不要忘記我的愛(ài)、永不變心、喜悅勿忘我原產(chǎn)于地中海沿岸至小亞細(xì)亞一帶，在花店總是擔(dān)任配花的角色。紫色的小花，簡(jiǎn)約而大方，筆直而堅(jiān)強(qiáng)，永遠(yuǎn)悄然地裝點(diǎn)著其他的花卉。如果你是這朵花，那么你一定是像張愛(ài)玲般才華橫溢卻可以看淡一切的女人，永遠(yuǎn)用清晰的眼光看著時(shí)間的紛擾，卻沒(méi)有避開(kāi)懦弱，永遠(yuǎn)用冷靜的理智看著情場(chǎng)上的春來(lái)春去，卻沒(méi)有逃避。一定有那么一個(gè)男人，很多年后回想往事，才明白你是他心中永不磨滅的勿忘我。"},{"Lid":"4","Description":"百合花語(yǔ)：心想事成、祝福、高貴、清純、百年好合你有著清純的品格。你對(duì)愛(ài)情有點(diǎn)遲鈍，是屬于晚熟的類型。整體而言，就像百合的花語(yǔ)“純潔”。對(duì)家人與自己所珍惜的人，你會(huì)全心全意地付出。你會(huì)喜歡的男性，是性格纖細(xì)、有藝術(shù)家氣質(zhì)的類型。你對(duì)戀愛(ài)有著少女漫畫(huà)般的憧憬，容易被他身上的危險(xiǎn)魅力所吸引。他把性情溫柔的你當(dāng)成“理想女性”的典型。在思考結(jié)婚的時(shí)候，你會(huì)比較偏向接受親人與好友的推薦，選擇一個(gè)家世與收入都可靠的對(duì)象。即使那個(gè)對(duì)象是一個(gè)性格大方而開(kāi)闊的人。"},{"Lid":"5","Description":"牡丹花語(yǔ)：驕傲、滿意、喜悅、富貴牡丹是中國(guó)的玫瑰，和玫瑰最大的不同，是因?yàn)樗鼈鹘y(tǒng)。一個(gè)艷麗的花朵上加上一份恒久的傳統(tǒng)積累，是怎樣的厚重的美麗。如果你當(dāng)選了這朵女人花，你一定是雍容華貴的，即使你是忙碌的上班族，也可以從你朝九晚五的工作中散發(fā)出傳統(tǒng)并高貴的魅力。艷麗如你，傳統(tǒng)也如你，你不會(huì)放縱自己，也不會(huì)因?yàn)椴恢档玫氖虑榕按约?。你喜歡事業(yè)有成的穩(wěn)重男士，但當(dāng)真正的愛(ài)情降臨到你身上的時(shí)候，你對(duì)愛(ài)情的執(zhí)著會(huì)拋開(kāi)一切世俗的觀點(diǎn)，執(zhí)意愛(ài)得轟轟烈烈。"}]}

綁定點(diǎn)擊事件

  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)

總結(jié)

以上是生活随笔為你收集整理的H5画布的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。