Wie transformiere ich das Bildmuster in JavaScript-Canvas fillStyle?

Question

Ich entwickle gerade eine 2D-Grafikbibliothek in JavaScript, und jetzt bleibe ich bei der Umwandlung von Hintergrundtexturen.

Ich möchte die Hintergrundtextur (Eigenschaft fillStyle) eines Leinwandkontextes (CanvasRenderingContext2D) zu einem Bild (CanvasPattern) setzen. Es ist einfach, dem fillStyle ein Bild zuzuweisen. Aber das einzige Problem ist, dass das Bild nicht wirklich übersetzt, skaliert oder verzerrt werden kann.

Ich habe nachgeschlagen MDN, es heißt, es gibt einen Prototyp namens setTransform(). Mit dieser API können Sie das Bild durch eine SVGMatrix transformieren, die ein wenig nervig scheint. Nicht nur Sie müssten ein redundantes <svg>-Element erstellen, es ist auch eine experimentelle API, und es kann nicht in Google Chrome funktionieren.

Es ist einfach unmöglich, auf eine normale Weise zu lösen. Gibt es irgendwelche 'hacky' Möglichkeiten, dies zu tun?

Answer 1

Setzen Sie die Transformation auf CanvasRenderingContext2D, nicht auf CanvasPattern. Dies wird viel besser unterstützt, und Sie brauchen das SVGMatrix-Objekt nicht zu verwenden.

Der resultierende bemalte Bereich ist der umgewandelte Bereich. Dies kann nur dann nützlich sein, wenn die gesamte Leinwand ein einheitliches Muster haben soll.

var canvas = document.getElementById('canvas'); 
 
var ctx = canvas.getContext('2d'); 
 

 
var img = new Image(); 
 
img.src = 'https://mdn.mozillademos.org/files/222/Canvas_createpattern.png'; 
 
img.onload = function() { 
 
    var pattern = ctx.createPattern(img, 'repeat'); 
 
    ctx.fillStyle = pattern; 
 
    ctx.setTransform(0.8, 0.3, 0, 0.8, 0, 0) 
 
    ctx.fillRect(0, -172, 450, 700); //make sure the whole canvas is covered 
 
};

<canvas id="canvas" width="400" height="400"></canvas>

Answer 2

zuerst den Pfad zeichnen und stellen Sie dann die Pfad-Transformation bleibt, wo er war, während die Füllung umgewandelt wird.

Das Beispiel dreht das Muster in zwei Boxen.

const ctx = canvas.getContext('2d'); 
 
var pattern; 
 

 
const img = new Image(); 
 
img.src = 'https://mdn.mozillademos.org/files/222/Canvas_createpattern.png'; 
 
img.onload =() => pattern = ctx.createPattern(img, 'repeat'); 
 

 

 

 
requestAnimationFrame(mainLoop); 
 
function mainLoop(time){ 
 
    ctx.setTransform(1,0,0,1,0,0); 
 
    ctx.clearRect(0,0,canvas.width,canvas.height); 
 

 
    ctx.fillStyle = pattern; 
 

 
    ctx.beginPath(); 
 
    ctx.setTransform(1,0,0,1,0,0); 
 
    ctx.rect(100,100,200,200); // create the path for rectangle 
 
    ctx.setTransform(1,0,0,1,300,200); // Set the transform for the pattern 
 
    ctx.rotate(time/1000); 
 
    ctx.fill(); 
 

 

 
    ctx.beginPath(); 
 
    ctx.setTransform(1,0,0,1,0,0); 
 
    ctx.rect(150,0,100,400); // create the path for the rectangle 
 
    ctx.setTransform(0.2,0,0,0.2,150,200); // Set the transform for the pattern 
 
    ctx.rotate(-time/1000); 
 
    ctx.fill(); 
 

 
    requestAnimationFrame(mainLoop); 
 
}

<canvas id="canvas" width="400" height="400" style="border:2px solid black;"></canvas>