Как повернуть один объект на холсте html 5?

Я пытаюсь выяснить, как вращать один объект на холсте html 5.

Например: http://screencast.com/t/NTQ5M2E3Mzct - Я хочу, чтобы каждая из этих карт была повернута в разной степени.

До сих пор все, что я видел, это статьи и примеры, демонстрирующие способы поворота всего холста. Прямо сейчас, я предполагаю, что мне придется повернуть холст, нарисовать изображение, а затем повернуть холст обратно к нему в исходное положение, прежде чем рисовать второе изображение. Если это случай, то просто дайте мне знать! У меня просто ощущение, что есть другой путь.

У кого-нибудь есть идея?

Спасибо заранее!

Ответы

Ответ 1

К сожалению, в элементе canvas HTML5 вы не можете повернуть отдельные элементы.

Анимация работает как рисование в MS Paint: вы рисуете что-то, создаете экран. Используйте ластик, чтобы удалить какой-то материал, нарисуйте что-то по-другому, сделайте экран. Нарисуйте что-нибудь еще сверху, сделайте экран... и т.д. и т.д..

Если у вас есть существующий элемент на холсте, вы должны его стереть (например, используйте ctx.fillRect() или clearRect()), а затем нарисуйте повернутый объект.

Если вы не знаете, как повернуть его, когда рисуете в первую очередь:

ctx.save();
ctx.rotate(0.17);
// draw your object
ctx.restore();

Ответ 2

Я столкнулся с той же проблемой в недавнем проекте (где я пнул вращающихся инопланетян повсюду). Я просто использовал эту скромную функцию, которая делает то же самое и может использоваться так же, как ctx.rotate, но может передаваться под углом. У меня отлично работает.

function drawImageRot(img,x,y,width,height,deg){
    // Store the current context state (i.e. rotation, translation etc..)
    ctx.save()

    //Convert degrees to radian 
    var rad = deg * Math.PI / 180;

    //Set the origin to the center of the image
    ctx.translate(x + width / 2, y + height / 2);

    //Rotate the canvas around the origin
    ctx.rotate(rad);

    //draw the image    
    ctx.drawImage(img,width / 2 * (-1),height / 2 * (-1),width,height);

    // Restore canvas state as saved from above
    ctx.restore();
}

Да, мой первый ответ!

Ответ 3

Чтобы повернуть отдельный объект, вы должны установить матрицу преобразования. Это действительно просто:

<body>
    <canvas width="1280" height="720" id="pageCanvas">
        You do not have a canvas enabled browser
    </canvas>
    <script>
        var context = document.getElementById('pageCanvas').getContext('2d');
        var angle = 0;
        function convertToRadians(degree) {
            return degree*(Math.PI/180);
        }

        function incrementAngle() {
            angle++;
            if(angle > 360) {
                angle = 0;
            }
        }

        function drawRandomlyColoredRectangle() {  
            // clear the drawing surface
            context.clearRect(0,0,1280,720);
            // you can also stroke a rect, the operations need to happen in order 
            incrementAngle();
            context.save();                
            context.lineWidth = 10;  
            context.translate(200,200);
            context.rotate(convertToRadians(angle));
            // set the fill style
            context.fillStyle = '#'+Math.floor(Math.random()*16777215).toString(16);
            context.fillRect(-25,-25,50,50);
            context.strokeRect(-25,-25,50,50);                
            context.restore();
        }

        // Ideally use getAnimationFrame but for simplicity:
        setInterval(drawRandomlyColoredRectangle, 20);
    </script>
</body>

Ответ 4

В основном, чтобы объект вращался правильно, без вращения другой формы, вам необходимо:

  1. сохранить контекст: ctx.save()
  2. переместите опорную точку в нужное место: ctx.translate(200, 200);
  3. rotate: context.rotate(45 * Math.PI/180);
  4. нарисовать форму, спрайт, что угодно: ctx.draw...
  5. сбросить сводную точку: ctx.translate(-200, -200);
  6. восстановить контекст в исходное состояние: ctx.restore();

function spinDrawing() {
    ctx.save();
    ctx.translate(200, 200);
    context.rotate(45 * Math.PI / 180);
    ctx.draw //your drawing function
    ctx.translate(-200, -200);
    ctx.restore();
}

Ответ 5

Этот код html/javascript может пролить свет на вопрос:

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="233" height="233" style="border:1px solid #d3d3d3;">
your browser does not support the canvas tag </canvas>

<script type="text/javascript">

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var canvasWidth=233;
var canvasHeight=233;
var rectWidth=100;
var rectHeight=150;
var x=30;
var y=30;
var translateX= x+(rectWidth/2);
var translateY= y+(rectHeight/2);

ctx.fillRect(x,y,rectWidth,rectHeight);

ctx.translate(translateX,translateY);
ctx.rotate(5*Math.PI/64); /* just a random rotate number */
ctx.translate(-translateX,-translateY); 
ctx.fillRect(x,y,rectWidth,rectHeight);


</script>

</body>
</html>

Мне полезно посмотреть на математику, связанную с вращением, я надеюсь, что это тоже было полезно для вас.

Ответ 6

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="500" height="450" style="border:1px solid #d3d3d3;">
</canvas>

<Button id = "right" onclick = "rotateRight()">Right</option>
<Button id = "left" onclick = "rotateLeft()">Left</option>
<script src = "zoom.js">

</script>

<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

createRect();

function rotateRight()
{
 ctx.save();
 ctx.clearRect(0,0,500,450);
 ctx.translate(c.width/2,c.height/2);
 ctx.rotate(10*Math.PI/180 );  
 ctx.translate(-c.width/2,-c.height/2);
 createRect();

}

function rotateLeft()
{
 ctx.save();
 ctx.clearRect(0,0,500,450);
 ctx.translate(c.width/2,c.height/2);
 ctx.rotate(-10*Math.PI/180 );  
 ctx.translate(-c.width/2,-c.height/2);
 createRect();  
}



function createRect()
{
 ctx.beginPath();
 ctx.fillStyle = "#AAAA00";
 ctx.fillRect(250,250,90,50);
}
</script>

</body>
</html>

Ответ 7

Чтобы повернуть объект, вы можете использовать метод rotate(). Здесь приведен пример поворота прямоугольного объекта на 135 градусов по часовой стрелке.      

 <script>
  var canvas = document.getElementById('Canvas01');
  var ctx = canvas.getContext('2d');

  var rectWidth = 100;
  var rectHeight = 50;

  //create line
  ctx.strokeStyle= '#ccc';
  ctx.beginPath();
  ctx.moveTo(canvas.width / 2, 0);
  ctx.lineTo(canvas.width / 2, canvas.height);
  ctx.stroke();
  ctx.closePath();

  ctx.beginPath();
  ctx.moveTo(0, canvas.height/2);
  ctx.lineTo(canvas.width, canvas.height/2);
  ctx.stroke();
  ctx.closePath();

  // translate ctx to center of canvas
  ctx.translate(canvas.width / 2, canvas.height / 2);

  // rotate the rect to 135 degrees of clockwise
  ctx.rotate((Math.PI / 180)*135);

  ctx.fillStyle = 'blue';
  ctx.fillRect(0, 0, rectWidth, rectHeight);
</script>
</body>

Вот демо, и вы можете попробовать себя: http://okeschool.com/examples/canvas/html5-canvas-rotate

Ответ 8

Я нашел этот вопрос, потому что у меня была куча вещей на холсте, нарисованная линиями холста, кропотливо, а затем решили, что некоторые из них должны быть повернуты. Не желая снова делать целую кучу сложных вещей, я хотел повернуть то, что у меня было. Я нашел это простое решение:

ctx.save();

ctx.translate(x+width_of_item/2,y+height_of_item/2);
ctx.rotate(degrees*(Math.PI/180));
ctx.translate(-(x+width_of_item/2),-(y+height_of_item/2));

// THIS IS THE STUFF YOU WANT ROTATED
// do whatever it is you need to do here, moveto and lineto is all i used 
// I would expect anything to work. use normal grid coordinates as if its a
// normal 0,0 in the top left kind of grid

ctx.stroke();
ctx.restore();

В любом случае - это может быть не особенно элегантно, но его мертвый простой способ повернуть один конкретный элемент на ваш холст.

Посмотрите на все повернутые элементы!