HTML5 Canvas, Bild an/in Polygon möglich?

Question

Gibt es eine Möglichkeit, Javascript html5 Canvas zu verwenden, um ein Polygon zu haben und dann ein Bild in ihm statt einer Farbe anzuzeigen?

Answer 1

Nach einigen Recherchen, ich glaube, es ist möglich, das zu tun, indem zunächst ein Muster mit Ihrem Bild zu erzeugen, dann dieses Musters zu fillStyle Einstellung:

var ctx = canvas.getContext("2d"); 
var pattern = ctx.createPattern(imageObj, "repeat"); 
ctx.fillStyle = pattern; 

Dann ist es nur eine Frage Ihres Polygon zu schaffen (mit moveTo und lineTo) und dann normal füllen.

Quelle: this plugin Quellcode. Disclaimer: habe es selbst nicht versucht zu bestätigen, dass das funktioniert.

Update: Ich untersuche immer noch, ob Sie das Bild manipulieren können, um ein beliebiges Polygon anzupassen. Im Prinzip könnte man setTransform tun verwenden, dass:

ctx.save(); 
ctx.setTransform(m11, m12, m21, m22, dx, dy); 
ctx.drawImage(imageObj); 
ctx.restore(); 

die Werte von setTransform Parametern Bestimmung (wenn es möglich ist, dass überhaupt zu tun) ist der schwierige Teil. Es ist laaange, seit ich jede Mathe tat, aber wenn ich das richtig ist hier daran erinnern, was getan werden muss:

(0,0) --- (w,0)  (x1,y1) --- (x2,y2) 
    |   |   |   | 
    | Image |  =>  | Morphed | 
    |   |   |   | 
(0,h) --- (w,h)  (x3,y3) --- (x4,y4) 

Für jeden Punkt, wird die folgende Matrix-Operation tun würde:

|m11 m21 dx| |xI| |xM| 
|m12 m22 dy| X |yI| = |yM| 
| 0 0 1| | 1| | 1| 

Acht Gleichungen, sechs Variablen (daran erinnern, dass die Matrixelemente die Variablen sind, der Rest sind Konstanten - unsere Eingaben). Könnte unlösbar sein. Jetzt ist es nur eine Frage der Ableitung (oder googlen oder fragen in Math.SE ...) und Implementierung der Formeln für jeden Parameter ...

Update 2: Obwohl ich keine harten Beweise dafür habe Ich glaube, es ist unmöglich, mit setTransform zu tun, was Sie wollen. Wenn man sich ansieht, wie Gimp mit seinem "perspektivischen" Werkzeug arbeitet, muss man auch die dritte Zeile der Transformationsmatrix ändern, um das Bild in ein beliebiges Polygon umzuwandeln. Und die Canvas-API scheint dafür keine Mittel zu bieten (normalerweise werden nur affine Transformationen unterstützt: Translation, Rotation, Skalierung, Scherung oder eine Kombination von Obigem).

this post auf 2D Zitiert verwandelt:

CSS3 2D-Transformationen können nur Blöcke in Parallelogramme verwandeln. Zum Beispiel ist es unmöglich, einen Block in diese Form zu transformieren: [Unregelmäßige Form] Um dies zu tun, muss man CSS3 3D Transforms verwenden. Aus diesem Grund hat das Matrix Construction Set nur drei Kontrollpunkte, nicht vier.

Es gibt Pläne für CSS 3D Transforms, aber nicht nur ich weiß nicht, wie weit unterstützt das heißt, ich weiß nicht, ob das Canvas-Element (mit 2d Kontext, das ist - WebGL eine andere Geschichte) wird es immer unterstützen. Kurz gesagt, es ist nicht möglich, das zu tun, was Sie wollen, mit allen Mitteln, die ich kenne.

Answer 2

Sie können ein Polygon mit einem Bild füllen context.clip() mit:

//create an image 
    var img = new Image(); 
    img.src = 'imgPath/image.png' 

    //draw the image when loaded 
    img.onload = function(){ 
     var ctx = canvas.getContext("2d"); 
     ctx.save(); 

     //define the polygon 
     ctx.beginPath(); 
     ctx.moveTo(x1,y1); 
     ctx.lineTo(x2,y2); 
     ctx.lineTo(x3,y3); 
     ctx.closePath(); 

     //draw the image 
     ctx.clip(); 
     ctx.drawImage(img, leftMostXCoor, highestYCoor, polyWidth, polyHeight); 

     //fill and stroke are still available for overlays and borders 
     ctx.fill(); 
     ctx.stroke(); 

     ctx.restore(); 
    }