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

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

33 голосов
/ 20 апреля 2010

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

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

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

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

Заранее спасибо!

Ответы [ 8 ]

59 голосов
/ 16 августа 2012

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

function drawImageRot(img,x,y,width,height,deg){

    //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);

    //reset the canvas  
    ctx.rotate(rad * ( -1 ) );
    ctx.translate((x + width / 2) * (-1), (y + height / 2) * (-1));
}

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

39 голосов
/ 20 апреля 2010

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

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

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

Если вы не уверены, как повернуть его во время рисования: 

ctx.save();
ctx.rotate(0.17);
// draw your object
ctx.restore();
16 голосов
/ 06 февраля 2011

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

<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>
8 голосов
/ 08 ноября 2012

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

  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();
}

Предостережения : после перевода происхождение холста изменилось, что означает, что при рисовании фигуры координату фигуры следует выровнятьсоответственно.

Фигуры, нарисованные вне списка, упомянутого выше, не будут затронуты.Я надеюсь, что это помогает.

3 голосов
/ 04 марта 2012

Этот 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>

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

2 голосов
/ 16 декабря 2014

Для поворота объекта вы можете использовать метод 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

2 голосов
/ 18 февраля 2013 
<!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>
0 голосов
/ 11 марта 2016

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

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();

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

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...