如何在Canvas上通过给定坐标绘制图像？

Question

我尝试根据需要在分配的坐标上放置图片， 但是我可以画出的形状和角度都没有匹配和纠正，只有左上角匹配

＆＃13;

＆＃13;

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);
}

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

谁能告诉我如何以正确的角度画出它？

Answer 1

我将此解决方案作为临时解决方案发布，如果我能以正确的方式呈现旋转图像的内容，那么我将其作为新答案发布。

使用上下文的beginPath和lineTo函数，您可以创建一个形状：

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();

然后您可以从图像创建图案并将其设置为fillstyle

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

然后翻译上下文，使模式从正确的位置开始（感谢@Kalido fir指出这一点）：

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

最后，您可以使用该模式填充形状：

ctx.fill();