HTML5畫布分解圖像

我的總體目標是製作滑動拼圖遊戲。使用畫布，我設法將圖像分成多個部分。爲了洗牌，我將這些棋子的座標寫成了一個數組，並對座標進行了洗牌，並在畫布上重新繪製了圖像。然而，這個難題最終會被一些重複的片斷所覆蓋！我不知道爲什麼？！HTML5畫布分解圖像

var c=document.getElementById("myCanvas"); 
var ctx=c.getContext("2d"); 
var img=document.getElementById("map"); 




//img,sx,sy,swidth,sheight,x,y,width,height 


function recreate_map(){ 

ctx.drawImage(img,0,0,133,100,0,0,133,100); 
ctx.drawImage(img,133,0,133,100,133,0,133,100); 
ctx.drawImage(img,266,0,133,100,266,0,133,100); 

ctx.drawImage(img,0,100,133,100,0,100,133,100); 
ctx.drawImage(img,133,100,133,100,133,100,133,100); 
ctx.drawImage(img,266,100,133,100,266,100,133,100); 

ctx.drawImage(img,0,200,133,100,0,200,133,100); 
ctx.drawImage(img,133,200,133,100,133,200,133,100); 
ctx.drawImage(img,266,200,133,100,266,200,133,100); 
} 


function shuffle_array(arr){ 
    var i = arr.length; 

    while(--i>0){ 
    var n = Math.floor(Math.random()*(i)); 
    var temp = arr[n]; 
    arr[n] = arr[i]; 
    arr[i] = temp; 
    } 

    return arr; 
} 



function shuffle_tiles(){ 
    var positions_x = [0,133,266,0,133,266,0,133,266]; 
    var positions_y = [0,0,0,100,100,100,200,200,200]; 

    shuffle_array(positions_x); 
    shuffle_array(positions_y); 



ctx.drawImage(img,0,0,133,100,positions_x[0],positions_y[0],133,100); 
ctx.drawImage(img,133,0,133,100,positions_x[1],positions_y[1],133,100); 
ctx.drawImage(img,266,0,133,100,positions_x[2],positions_y[2],133,100); 
ctx.drawImage(img,0,100,133,100,positions_x[3],positions_y[3],133,100); 
ctx.drawImage(img,133,100,133,100,positions_x[4],positions_y[4],133,100); 
ctx.drawImage(img,266,100,133,100,positions_x[5],positions_y[5],133,100); 
ctx.drawImage(img,0,200,133,100,positions_x[6],positions_y[6],133,100); 
ctx.drawImage(img,133,200,133,100,positions_x[7],positions_y[7],133,100); 
ctx.drawImage(img,266,200,133,100,positions_x[8],positions_y[8],133,100); 

}

如果有幫助，我在Firefox上使用JS Bin。謝謝。

來源

2014-01-12 user3181400

您需要清除每次重繪的畫布，否則之前的內容將保留。

試試這個：

function recreate_map(){ 

    /// call this first 
    ctx.clearRect(0, 0, c.width, c.height); 

    ctx.drawImage(img,0,0,133,100,0,0,133,100); 
    ...

來源

2014-01-12 20:46:12 K3N

HTML5畫布分解圖像

回答

相關問題