在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>