2

Como posso desenhar uma imagem a repetindo até preencher uma área? Algo como o efeito da propriedade CSS background-repeat. Onde a imagem é repetida até preencher toda a área da tag.

2
  • Queres fazer isso com Canvas? podes explicar melhor a pergunta? tens alguma imagem em canvas?
    – Sergio
    Commented 9/11/2016 às 15:13
  • @Sergio sim, com canvas. Quero usar a função context.drawImage() para desenhar uma imagem, mas ela precisa repetir do mesmo jeito que uma backgroud de uma tag com a propriedade CSS background-repeat
    – Silva97
    Commented 11/11/2016 às 1:14

1 Resposta 1

1

A API do canvas tem uma funcionalidade para padrões.

Um exemplo:

var canvas = document.getElementById("my_canvas"),
context = canvas.getContext("2d"),

var img = new Image();

img.src = 'http://bit.ly/2fDRYfC';

img.onload = function(){
    var pattern = context.createPattern(img, 'repeat');
    context.fillStyle = pattern;
    context.fillRect(0, 0, canvas.width, canvas.height);
}
1
  • 1
    Eu lhe agradeço, desculpe não marcar como respondido antes é que simplesmente havia me esquecido.
    – Silva97
    Commented 30/11/2016 às 14:11

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .