原生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)

總結

以上是生活随笔為你收集整理的H5画布的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。