Элемент холста - вращение

Question

У меня несколько элементов холста, каждый из которых работает сам по себе. Я хотел бы использовать их для создания многопользовательской игры. Он работает отлично, но теперь я хотел бы повернуть отдельные элементы холста (180 градусов). Я попробовал метод getContext ('2d'), но это только помогает мне для одного объекта obeject на холсте. Но то, что я хотел бы сделать, это повернуть холст WHOLE.

Кто-нибудь знает, как я могу это сделать?

Feilx

Answer 1

Вы можете использовать CanvasRenderingContext2D.rotate() и CanvasRenderingContext2D.translate методы для этой цели, следующий пример иллюстрирует это:

var canvas = document.getElementById("canvas"); 
 
var angleInput = document.getElementById("angleInput"); 
 
canvas.width = 800; 
 
canvas.height = 600; 
 
var ctx = canvas.getContext("2d"); 
 

 
var angleInDegrees=0; 
 
drawRotated(ctx,angleInDegrees); 
 

 
document.getElementById("clockwiseButton").addEventListener('click',function(){ 
 
\t angleInDegrees+=parseInt(angleInput.value); 
 
\t drawRotated(ctx,angleInDegrees); 
 
}); 
 

 
document.getElementById("counterclockwiseButton").addEventListener('click',function(){ 
 
\t angleInDegrees-=parseInt(angleInput.value); 
 
\t drawRotated(ctx,angleInDegrees); 
 
}); 
 

 

 

 
function drawRotated(ctx,degrees){ 
 
\t var canvasWidth = ctx.canvas.width; 
 
    var canvasHeight = ctx.canvas.height; 
 
    ctx.clearRect(0,0,canvasWidth,canvasHeight); // Clear the canvas 
 
    ctx.save(); 
 
    ctx.translate(canvasWidth/2,canvasHeight/2); // Move registration point to the center of the canvas 
 
    ctx.rotate(degrees*Math.PI/180); // Rotate 
 
    drawObjects(ctx); 
 
    ctx.restore(); 
 
} 
 

 

 

 
function drawObjects(ctx) 
 
{ 
 
    //draw triangle 
 
    ctx.beginPath(); 
 
    ctx.moveTo(200,150); 
 
    ctx.lineTo(150,200); 
 
    ctx.lineTo(250,200); 
 
    ctx.fill(); 
 

 
    //draw circle 
 
    ctx.beginPath(); 
 
    ctx.arc(350,75,50,0,Math.PI*2,false); 
 
    ctx.fill(); 
 
    ctx.stroke(); 
 

 
    //draw rectangle 
 
    ctx.fillRect(50,50,150,50); 
 
}

<div> 
 
    <button id="clockwiseButton">Rotate right</button> 
 
    <button id="counterclockwiseButton">Rotate left</button> 
 
    <input id="angleInput" value="45"></input> 
 
</div> 
 
<canvas id="canvas"></canvas>

JSFiddle