Javascript HTML5画布分解图像
我的总体目标是制作一款滑动拼图游戏。使用画布,我成功地将图像分割成多个部分。为了洗牌,我将棋子的坐标写进一个数组,洗牌坐标,然后在画布上重新绘制图像。然而,拼图的最后是一些被复制的碎片!我不知道为什么Javascript HTML5画布分解图像,javascript,html,image,canvas,drawimage,Javascript,Html,Image,Canvas,Drawimage,我的总体目标是制作一款滑动拼图游戏。使用画布,我成功地将图像分割成多个部分。为了洗牌,我将棋子的坐标写进一个数组,洗牌坐标,然后在画布上重新绘制图像。然而,拼图的最后是一些被复制的碎片!我不知道为什么 var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); var img=document.getElementById("map"); //img,sx,sy,swidth,sheight,x,y,wid
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。谢谢 每次重画都需要清除画布,否则之前的内容将保留 试试这个:
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);
...