Изображение в виде "фона" для нарисованной фигуры

Возможно ли "заполнить" фигуру на холсте HTML5 изображением вместо цвета?

Я нарисовал кучу фигур (квадраты с различными углами, срезанными под углом 45 градусов). Я хотел бы иметь возможность "заполнить" эти фигуры изображением вместо цвета. На данный момент у меня есть строка:

context.fillStyle = '#123456' // example fill color

То, что я ищу, это что-то вроде:

context.fillStyle = 'url(http://www.myimagereference.com/image.png)';

Я знаю, что я не могу использовать fillStyle таким образом - но есть ли другой способ достичь такого рода вещей?

Ответы

Ответ 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 = "...";

Ответ 2

Вы можете взглянуть на createPattern
ниже приведен простой код, демонстрирующий использование createPattern

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var w = canvas.width = 256;
var h = canvas.height = 256;
var img = new Image();

img.src = "http://www.gravatar.com/avatar/e555bd971bc2f4910893cd5b785c30ff?s=128&d=identicon&r=PG";
img.onload = function () {
    var pattern = ctx.createPattern(img, "repeat");
    ctx.fillStyle = pattern;
    ctx.fillRect(0, 0, w, h);
};

Попробуйте пример