記錄下開放過程。做小游戲開發，又要跨平台，flash又不支持iPhone，html5是最好的選擇。
先看看最后效果：
好了，開始demo。
1.准備工作：
圖片素材（省略...最后代碼一起打包）
了解 HTML5 Canvas API
2.開工：
首先創建Canvas
1 <div style=" background-image:url(sudoku-bg.png); width:590px; height:632px; position:relative"> 2 <canvas id="CanvasCup" width="540" height="500"></canvas> 3 </div>
ok，簡單明了，現在要搞清楚的是擺放9張圖片到Canvas，計算下x,y坐標，下面我定義一個數組
var bgImg=[]; bgImg[0]=[20,0]; bgImg[1]=[190,0]; bgImg[2]=[360,0]; bgImg[3]=[20,170]; bgImg[4]=[190,170]; bgImg[5]=[360,170]; bgImg[6]=[20,340]; bgImg[7]=[190,340]; bgImg[8]=[360,340];
要畫在Canvas上面，直接循環下即可，首先定義下 Canvas對象，Image對象，初始化Image對象高，寬
var imageWidth = 150; var imageheight = 150;，然后調用HTML5 Canvas API 去繪畫
var canvas =document.getElementById("CanvasCup"); var context2D = canvas.getContext("2d"); var pic = new Image(); pic.src = "bg.png"; //注意目錄結構，這里是把圖片和html放在一個目錄 for(var i =0;i<9;i++){ pic.onload = function(){ context2D.drawImage(pic,bgImg[i][0], bgImg[i][1],imageWidth,imageheight); } }
好了，現在就可以看到9張圖片擺放的整整齊齊。
接下來的動作就是動畫效果，從第1~9張圖片 一張一張 向中間移動，既然要向中間移動的話就要知道中間的坐標位置，就是bgImg[4]=[190,170];第一張坐標是bgImg[1]=[20,0] ，相當於是從20移動到190，0移動到170，移動的時候按Speed計算，這里我把速度初始化為 Speed = 1，fps = 1000的話 ，那么1毫秒x移動1個單位，y移動1個單位。第二的時候 x坐標等於190，y坐標0，相對中心點而言，只需移動y坐標即可，以此類推。最后去維護一個setInterval函數
1 function draw(){ 2 if( iy+Speed == CenterPint[1] || ix + Speed == CenterPint[0] || ix == CenterPint[0] && iy == CenterPint[1] ){ 3 if(t<9){t++; ix = bgImg[t][0]; iy = bgImg[t][1];} 4 } 5 if(ix != CenterPint[0]){ 6 CenterPint[0]-ix > 0 ? ix = ix + Speed : ix = ix - Speed; 7 ｝ 8 if(iy != CenterPint[1]){ 9 CenterPint[1]-iy > 0 ? iy = iy + Speed : iy = iy - Speed; 10 ｝ 11 12 context2D.clearRect(0,0,canvas.getAttribute("width"),canvas.getAttribute("height")); 13 if( t >= 4) {context2D.drawImage(pic,bgImg[4][0], bgImg[4][1],imageWidth,imageheight);}; 14 for(var i =0;i<9;i++){ 15 if( t < i ){ 16 context2D.drawImage(pic,bgImg[i][0], bgImg[i][1],imageWidth,imageheight); 17 } 18 } 19 context2D.save();//保存畫筆狀態 20 context2D.translate(ix ,iy); 21 context2D.drawImage(pic,0, 0,imageWidth,imageheight); 22 context2D.restore();//繪制結束以后，恢復畫筆狀態 23 24｝interval = setInterval(draw, 1000/fps);
這樣就可以實現動畫效果了。（截圖的時候正在移動.....）
最終都會移動到中心點集合。現在又要返回去移動到原來的9個點的坐標，就是從中心點向外移動。原理與正方向移動一樣，這里還需要維護一個正方向和反方向的bool，反方向時候的第一次初始化x,y, 這里我重新改造下draw函數，增加反方向到最后一個的時候 增加點擊事件
1 var direction = true; //true正面轉動，false 反面轉動 stop(); return; 2 var bool = true; //維護反方向 x坐標 第一次初始化賦值 3 var booly = true; //維護反方向 y坐標 第一次初始化賦值 4 function draw(){ 5 if(t > 8){ direction=false;t--;ix = bgImg[t][0]; iy = bgImg[t][1];} 6 if(t < 0){ direction=true; t++; stop(); boxclick(canvas,context2D); return;}//點擊事件 7 if(direction){ 8 if( iy+Speed == CenterPint[1] || ix + Speed == CenterPint[0] || ix == CenterPint[0] && iy == CenterPint[1] ){ 9 if(t<9){t++; ix = bgImg[t][0]; iy = bgImg[t][1];} 10 } 11 } 12 else{ 13 if(iy+Speed == bgImg[t][1] || ix+Speed == bgImg[t][0] || ix == CenterPint[0] && iy == CenterPint[1]) 14 if(t>=0){t--; ix = bgImg[t][0];iy = bgImg[t][1]; bool=true; booly=true;} 15 } 16 if(ix != CenterPint[0]){ 17 if(direction){CenterPint[0]-ix > 0 ? ix = ix + Speed : ix = ix - Speed;} 18 else{ 19 if(CenterPint[0]-ix < 0){ 20 if(bool){ 21 bool =false; 22 ix = CenterPint[0]; 23 } 24 ix = ix+ Speed; 25 } 26 else { if(bool){ 27 bool =false;ix = CenterPint[0]; 28 } 29 ix = ix- Speed;} 30 } 31 } 32 if(iy != CenterPint[1]){ 33 if(direction){ 34 CenterPint[1]-iy > 0 ? iy = iy + Speed : iy = iy - Speed;} 35 else{ 36 if(CenterPint[1]-iy < 0){ 37 if(booly){ 38 booly =false; 39 iy = CenterPint[1]; 40 } 41 iy = iy+ Speed; 42 } 43 else { if(booly){ 44 booly =false;iy = CenterPint[1]; 45 } 46 iy = iy - Speed; 47 } 48 } 49 } 50 context2D.clearRect(0,0,canvas.getAttribute("width"),canvas.getAttribute("height")); 51 if( t >= 4) {context2D.drawImage(pic,bgImg[4][0], bgImg[4][1],imageWidth,imageheight);}; 52 for(var i =0;i<9;i++){ 53 if( t < i ){ 54 context2D.drawImage(pic,bgImg[i][0], bgImg[i][1],imageWidth,imageheight); 55 } 56 } 57 context2D.save();//保存畫筆狀態 58 context2D.translate(ix ,iy); 59 context2D.drawImage(pic,0, 0,imageWidth,imageheight); 60 context2D.restore();//繪制結束以后，恢復畫筆狀態 61 } 62 interval = setInterval(draw, 1000/fps);
下面是點擊事件函數，當點擊的時候獲取到點擊的坐標，然后去判斷坐標區域在9個坐標的哪個坐標范圍內，再進行圖片替換。我這里是demo就直接圖片替換了，做成抽獎的話，還需要通過后台概率，然后返回前端去顯示對應的圖片。
1 function boxclick(canvas,context2D){ 2 canvas.onclick = function(e) { 3 var canvasOffset = $(canvas).offset(); 4 var canvasX = Math.floor(e.pageX - canvasOffset.left); 5 var canvasY = Math.floor(e.pageY - canvasOffset.top); 6 //console.log("x:"+canvasX +" y:"+canvasY); 7 var p = new Image(); 8 p.src = "get-2.png"; //注意目錄結構，這里是把圖片和html放在一個目錄的 9 lottery(canvasX,canvasY,context2D,p); 10 } 11 } 12 function lottery(x,y,context2D,p){ 13 //alert("x:"+x+"y:"+y); 14 for(var i =0;i<9;i++){ 15 var w = bgImg[i][0] + imageWidth; 16 var h = bgImg[i][1] + imageheight; 17 18 if(bgImg[i][0] <=x && x <= w && bgImg[i][1]<=y && y<=h) 19 { 20 console.log("p:"+i); 21 var pWidth = bgImg[i][0]; 22 var pHeight = bgImg[i][1]; 23 p.onload = function(){ 24 context2D.drawImage(p,pWidth,pHeight,imageWidth,imageheight); 25 } 26 } 27 } 28 } 29 function stop(){ 30 clearInterval(interval); 31 }
請各位大牛們指點，小弟在此由衷的感謝。