在Javascript中旋转多个图像

Posted 2023-03-25

【中文标题】在Javascript中旋转多个图像

【英文标题】：Rotate multiple images in Javascript

【发布时间】：2018-02-23 07:37:04

【问题描述】：

我在画布的背景上有背景图片。我想在背景图像上放另一个图像。所以我可以在任何方向向上旋转图像。我正在尝试互联网上提供的 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();

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

【参考方案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>