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时，您不是在旋转单个图像，而是旋转整个画布。要仅旋转第二个图像，您需要利用画布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>

在Javascript中旋转多个图像

1 个答案: