我正在创建一个简单的拼图游戏。为了做到这一点,我需要将我使用的图片切成20个块。在Javascript中有没有一种方法可以将一张图片切成20个相等的部分,并将它们保存为网页中的20个不同对象?还是我必须自己进入Photoshop并将每个图片切割出来,并在代码中调用它们?
我正在创建一个简单的拼图游戏。为了做到这一点,我需要将我使用的图片切成20个块。在Javascript中有没有一种方法可以将一张图片切成20个相等的部分,并将它们保存为网页中的20个不同对象?还是我必须自己进入Photoshop并将每个图片切割出来,并在代码中调用它们?
使用Canvas很容易实现。一般的思路是:
var image = new Image();
image.onload = cutImageUp;
image.src = 'myimage.png';
function cutImageUp() {
var imagePieces = [];
for(var x = 0; x < numColsToCut; ++x) {
for(var y = 0; y < numRowsToCut; ++y) {
var canvas = document.createElement('canvas');
canvas.width = widthOfOnePiece;
canvas.height = heightOfOnePiece;
var context = canvas.getContext('2d');
context.drawImage(image, x * widthOfOnePiece, y * heightOfOnePiece, widthOfOnePiece, heightOfOnePiece, 0, 0, canvas.width, canvas.height);
imagePieces.push(canvas.toDataURL());
}
}
// imagePieces now contains data urls of all the pieces of the image
// load one piece onto the page
var anImageElement = document.getElementById('myImageElementInTheDom');
anImageElement.src = imagePieces[0];
}
<div class="puzzle piece1"></div>
<div class="puzzle piece2"></div>
CSS:
.puzzle {
background-image:url(/images/puzzle.jpg);
width:100px;
height:100px;
}
.piece1 {
background-position:0 0
}
.piece2 {
background-position:-100px -100px
}
您可以使用drawImage方法来切割源图像的部分并将它们绘制到画布上:
drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Using_images
类似这样的:
document.getElementById("vangogh").onclick=function()
{
draw();
};
function draw() {
var ctx = document.getElementById('canvas').getContext('2d');
ctx.drawImage(document.getElementById('source'),33,45);
}
然后为您的新实体创建可拖动内容:
<div id="columns">
<div class="column" draggable="true"><header>A</header></div>
<div class="column" draggable="true"><header>B</header></div>
<div class="column" draggable="true"><header>C</header></div>
</div>