複数の画像をJavascriptで回転する

Question

キャンバスの背景に背景画像があります。そして私は背景イメージに別のイメージを入れたい。 SO iは任意の方向に上向きの画像を回転させることができる。私はインターネット上で利用可能な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(); 

/////////////////////////////////////////// ///////////////////////////////////////////////////////////////// /////////////////////////////////////////////////////////////////私はいくつかの角度で第2の画像を回転させることができるように//////////

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を呼び出すと、個々の画像は回転せず、キャンバス全体が回転します。 2番目の画像のみを回転させるには、キャンバス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>