Wie zeichne Bild nach gegebener Koordinate auf Canvas?

Question

Ich experimentierte Bilder platzieren auf eine zugeordnete Koordinate je nach Bedarf, aber was ich weder Form ziehen kann und Winkel wurde angepasst und korrigiert werden, nur die obere linke Spiele

var _width, _height; 
 
var img = new Image(); 
 
var img2 = new Image(), 
 
    img2Widht = 0, 
 
    img2Height = 0; 
 

 
img.src = "http://production.manboker.com/share/1.jpg"; 
 
var canvas = document.getElementById("canvas"); 
 
img.onload = function() { 
 
    canvas.width = _width = this.width; 
 
    canvas.height = _height = this.height; 
 
    img2.src = "http://production.manboker.com/share/2.png"; 
 
    img2.onload = function() { 
 
    img2Widht = coor['rightTop'][0] - coor['leftTop'][0]; 
 
    img2Height = coor['leftBottom'][1] - coor['leftTop'][1]; 
 
    step1(); 
 
    } 
 
} 
 
var coor = { 
 
    leftTop: ["92", "569"], 
 
    rightTop: ["672", "569"], 
 
    leftBottom: ["109", "1437"], 
 
    rightBottom: ["723", "1437"] 
 
} 
 

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

 
function step1() { 
 
    ctx.clearRect(0, 0, _width, _height); 
 
    ctx.globalCompositeOperation = 'source-over'; 
 
    ctx.drawImage(img,0,0); 
 
    //ctx.globalCompositeOperation = "multiply"; 
 
    step2(); 
 
} 
 

 
function step2() { 
 
    ctx.drawImage(img2, 92,569,img2Widht,img2Height); 
 
}

* { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
html, 
 
body { 
 
    position: relative; 
 
    overflow: hidden; 
 
    height: 100%; 
 
    width:100%; 
 
}

<canvas id="canvas" style="position:absolute;"></canvas>

Kann mir jemand sagen, wie man es mit dem richtigen Winkel zeichnet?

Answer 1

Ich poste diese Lösung als eine temporäre, wenn ich etwas heraufbringen kann, das das Bild in der richtigen Weise dreht, dann posten ich es neben dieser als eine neue Antwort.

Mit Hilfe der beginPath und lineTo Funktionen Kontext können Sie eine Form erstellen:

ctx.beginPath(); 
ctx.lineTo(coor.leftTop[0], coor.leftTop[1]); 
ctx.lineTo(coor.rightTop[0], coor.rightTop[1]); 
ctx.lineTo(coor.rightBottom[0], coor.rightBottom[1]); 
ctx.lineTo(coor.leftBottom[0], coor.leftBottom[1]); 
ctx.closePath(); 

Dann können Sie ein Muster aus dem Bild erstellen und sie als FillStyle gesetzt

var pattern = ctx.createPatter(img2, "repeat"); 
ctx.fillStyle = pattern; 

dann den Kontext übersetzen Das Muster beginnt also an der richtigen Position (Danke, dass die @Kalido-Tanne darauf hinweist):

ctx.restore(); // set back the context from the previous try 
ctx.save(); 
ctx.translate(coors.leftTop[0], coors.leftTop[1]); 

Und schließlich können Sie das Muster verwenden, um die Form zu füllen:

ctx.fill();