在Javascript中旋转多个图像

Question

我在画布的背景上有背景图片。我想在背景图像上放另一个图像。所以我可以在任何方向向上旋转图像。我正在尝试互联网上提供的 javascript 代码。但是两个图像都被旋转了。我只想以某个角度向上旋转图像。

/* Upload first image to 0,0 co-ordinate. */

ctx.beginPath();
var imageObj = new Image();
imageObj.onload = function() 
{
    ctx.drawImage(imageObj, 0, 0, 300, 150);
};
imageObj.src = 'C://Users//rajesh.r//Downloads//images//images.jpg';
options.ctx.fill();

/////////////////////////////////////// ///////////////////////////////////////// ///////////////////////////////////////// //////

  ctx.beginPath();
  ctx.translate(400,300);
  ctx.rotate(2*Math.PI / 8);
  var thumbImageObj = new Image();
  thumbImageObj.onload = function() 
  {
    ctx.drawImage(thumbImageObj, 0, 0, 120, 20);
  };

  thumbImageObj.src = 'C://Users//rajesh.r//Downloads//images//images.png';
  ctx.fill();

我想要一些解决方案，以便我可以将第二张图片旋转某个角度。

Answer 1

当您在画布上调用 rotate 时，您不是在旋转单个图像，而是旋转整个画布。要仅旋转第二张图像，您需要利用 canvas API 提供的 save 和 restore 方法。

以下是基于您共享的代码的示例：

// canvas setup
var canvas = document.getElementById('canvas');
canvas.width  = window.innerWidth;
canvas.height = window.innerHeight;
var ctx = canvas.getContext('2d');

// 1st image
var imageObj = new Image();
imageObj.onload = function() {
    ctx.drawImage(imageObj, 0, 0, 100, 100);
};
imageObj.src = 'https://s3.amazonaws.com/so-answers/image1.jpg';

// 2nd image
var thumbImageObj = new Image();
thumbImageObj.onload = function() {
    // save current canvas state
    ctx.save();
    // perform transformation
    ctx.translate(110,110);
    ctx.rotate(20*Math.PI / 180);
    ctx.drawImage(thumbImageObj, 0, 0, 100, 100);
    // restore original canvas state (without rotation etc)
    ctx.restore(); 
};
thumbImageObj.src = 'https://s3.amazonaws.com/so-answers/image2.jpg';

body {
  overflow: hidden;
  margin: 0;
  padding: 0;
}

<canvas id="canvas"></canvas>