Ответ 1
Вы можете сделать это, указав область отсечения, которая совпадает с вашей формой, а затем используя drawImage()
для рисования в эту область; затем выполните (только) свой путь поверх этого.
Я создал пример этой техники для вас на моем сайте:
http://phrogz.net/tmp/canvas_image_as_background_to_shape.html
Здесь соответствующий код; он пропорционально масштабирует изображение, чтобы заполнить указанную ширину:
function clippedBackgroundImage( ctx, img, w, h ){
ctx.save(); // Save the context before clipping
ctx.clip(); // Clip to whatever path is on the context
var imgHeight = w / img.width * img.height;
if (imgHeight < h){
ctx.fillStyle = '#000';
ctx.fill();
}
ctx.drawImage(img,0,0,w,imgHeight);
ctx.restore(); // Get rid of the clipping region
}
Это зависит от вас, чтобы изменить это, если вы хотите использовать тайлинг или асимметричное растягивание, непрозрачность и т.д. Здесь вы можете использовать его:
function slashedRectWithBG( ctx, x, y, w, h, slash, img ){
ctx.save(); // Save the context before we muck up its properties
ctx.translate(x,y);
ctx.beginPath();
ctx.moveTo( slash, 0 ); ////////////
ctx.lineTo( w, 0 ); // //
ctx.lineTo( w, h-slash ); // //
ctx.lineTo( w-slash,h ); // //
ctx.lineTo( 0, h ); // //
ctx.lineTo( 0, slash ); ////////////
ctx.closePath();
clippedBackgroundImage( ctx, img, w, h );
ctx.stroke(); // Now draw our path
ctx.restore(); // Put the canvas back how it was before we started
}
Обратите внимание, что при создании изображения для перехода к функции вы должны установить свой обработчик onload
перед установкой src
:
var img = new Image;
img.onload = function(){
// Now you can pass the `img` object to various functions
};
img.src = "...";