вращать и перемещать изображение в тот же момент холст

Question

Я хочу повернуть и переместить изображение, но когда я использую .rotate(), я вращаю canvas.context - с системой координат. При попытке изменения х-коорд, я не могу переместить объект горизонтально - они движется по новой (по диагонали) оси х :( jsfiddle code Как я могу переместить его по горизонтали

 ctx.clearRect(0, 0, canvas.width, canvas.height); 
     ctx.save(); 
     ctx.translate(100, 100); 
     ctx.rotate(r1/180) 
     ctx.translate(-100, -100); 
     ctx.drawImage(image, x1, x2, 100, 100); 
     ctx.rotate(-r1/180); 
     ctx.restore(); 
     x1 += 1; 
     r1 += 1; 

Answer 1

Использование преобразований для одновременного перемещения & вращаться? изображение выглядит следующим образом:

• Очистить холст

• Перевести на новой системе координат, где вы хотите Centerpoint на изображение, чтобы быть Translati.. ng фактически репозиционирует начало [0,0] холста. Все новые пиксели, нарисованные на холсте, будут нарисованы при новом происхождении, и любые вращения вызовут все новых пикселей, чтобы повернуть вокруг нового источника.

• Поворот по вашему желаемому радианному углу.

• Нарисовать смещение изображения отрицательной половиной Ширина & отрицательный halfHeight. Это необходимо для позиционирования центральной точки изображения непосредственно по началу координат (начало координат = точка поворота).

Пример кода и демо:

var canvas=document.getElementById("canvas"); 
 
var ctx=canvas.getContext("2d"); 
 
var cw=canvas.width; 
 
var ch=canvas.height; 
 

 
var centerX=50; 
 
var centerY=200; 
 
var radianAngle=0; 
 

 
var img=new Image(); 
 
img.src="https://i.stack.imgur.com/K2Npl.png"; 
 
img.onload=start; 
 

 
function start(){ 
 
    requestAnimationFrame(animate); 
 
} 
 

 
function animate(time){ 
 
    // request another animation frame 
 
    if(centerX<cw){ 
 
    requestAnimationFrame(animate); 
 
    } 
 

 
    // clear the canvas 
 
    ctx.clearRect(0,0,cw,ch); 
 

 
    // draw the sky 
 
    ctx.fillStyle='skyblue'; 
 
    ctx.fillRect(0,0,cw,ch); 
 
    
 
    // translate to the new point where 
 
    // you want the images center to be 
 
    ctx.translate(centerX,centerY); 
 

 
    // rotate the canvas 
 
    ctx.rotate(radianAngle); 
 

 
    // draw the image 
 
    // offset by half-width & half-height 
 
    // because img.center == centerX,centerY 
 
    ctx.drawImage(img,-img.width/2,-img.height/2); 
 

 
    // undo the transforms 
 
    ctx.setTransform(1,0,0,1,0,0); 
 

 
    // draw grass 
 
    ctx.fillStyle='forestgreen'; 
 
    ctx.fillRect(0,200,cw,ch-200); 
 

 
    // draw soil 
 
    ctx.fillStyle='saddlebrown'; 
 
    ctx.fillRect(0,200,cw,5); 
 

 
    // move 
 
    centerX+=.2; 
 
    centerY+=(centerX<cw/2)?-.2:.2; 
 

 
    // rotate 
 
    radianAngle+=Math.PI/60; 
 
}

body{background-color:ivory; padding:10px;} 
 
#canvas{border:1px solid red;}

<canvas id="canvas" width=500 height=170></canvas>