Вы можете нарезать и пространство изображение врозь, используя холсту drawImage функцию
Всех работы выполняются с помощью функции context.drawImage, используя некоторые дополнительные параметры
drawImage способен подрезать часть исходного изображения и нарисовать его на холсте
BTW, drawImage также может одновременно масштабировать эту обрезанную часть.
Вот аргументы, чтобы позволить drawImage разрезать исходное изображение:
- Источник изображения
- X позиция на исходном изображении, где отсечение начнет
- Y позиции на исходном изображении, где отсечение начнет
- Ширина исходного изображения для клипа
- высоты исходного изображения для клипа
- Х положение на холсте, чтобы поместить обрезанное вспомогательное изображению
- Y положение на холсте, чтобы поместить обрезанный вспомогательное изображение
- масштабированной ширину подрезанных изображений, который можно сделать на холсте
- Масштабированных высоты отсеченное изображение, которое будет обращено на холсте
А вот как использовать DrawImage разрезать исходное изображение в 3x3 клетки с 10px расстояния
context.drawImage(
img, // the source image
0,0, // get the image starting at it's 0,0 position
img.width, // grab the entire width of the image
img.height // grab the entire height of the image
x*img.width/3+10, // make 3 image "columns" with 10px spacing
x*img.height/3+10, // make 3 image "rows" with 10px spacing
img.width/3, // each image column is 1/3 of the original image
img.height/3 // each image row is 1/3 of the original image
);
здесь Код и сценарий: http://jsfiddle.net/m1erickson/m89Gg/
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
body{ background-color: ivory; }
canvas{border:1px solid red;}
</style>
<script>
$(function(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var image=new Image();
image.onload=function(){
slice(image);
}
image.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/sky-bg2.jpg";
function slice(img){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var w=img.width; // original image width
var h=img.height; // original image height
var rows=3; // # of rows
var cols=3; // # of columns
var cw=w/rows; // cell width
var ch=h/cols; // cell height
var scale=3; // also, scale the image down
var spacing=5; // spacing between cells
// set the canvas width to accommodate
// sliced/space/scaled image
canvas.width=w/scale+spacing*2;
canvas.height=h/scale+spacing*2;
ctx.clearRect(0,0,canvas.width,canvas.height);
for(var y=0;y<3;y++){
for (var x=0;x<3;x++){
ctx.drawImage(img,x*cw,y*ch,cw,ch,
x*(cw/scale+spacing),y*(ch/scale+spacing),cw/scale,ch/scale)
}
}
ctx.stroke()
}
}); // end $(function(){});
</script>
</head>
<body>
<canvas id="canvas" width=300 height=300></canvas>
</body>
</html>
Да, конечно, вы можете. (1) установить фоновое изображение холста в качестве изображения (2) нарисовать линии, которые вам нужны на холсте. Peasy-легко. Проверьте некоторые ссылки на '