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