堆棧內存溢出
  簡體   English   中英

如何在 html 5 畫布上旋轉單個對象？

[英]How do I rotate a single object on an html 5 canvas?

 原文  2010-04-20 18:35:23  4   8    javascript/ animation/ html/ canvas

問題描述

我想弄清楚如何在 html 5 畫布上旋轉單個對象。

例如： http : //screencast.com/t/NTQ5M2E3Mzct - 我希望這些卡片中的每一張都以不同的角度旋轉。

到目前為止，我所看到的只是展示如何旋轉整個畫布的文章和示例。 現在，我猜我必須旋轉畫布，繪制圖像，然后在繪制第二幅圖像之前將畫布旋轉回其原始位置。 如果是這樣，那就讓我知道吧！ 我只是覺得還有另一種方式。

任何人有任何想法？

提前致謝！

8 個解決方案

解決方案1
 71  

我在最近的一個項目中遇到了同樣的問題（我把旋轉的外星人踢到了所有地方）。 我只是使用了這個不起眼的函數，它做同樣的事情，可以像 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();
}

是的，我的第一個答案！

解決方案2
 38 已采納  2010-04-20 18:47:25

不幸的是，在 HTML5 畫布元素中，您不能旋轉單個元素。

動畫就像在 MS Paint 中繪圖：你畫一些東西，制作一個屏幕......使用橡皮擦去除一些東西，繪制不同的東西，制作一個屏幕......在上面繪制其他東西，制作一個屏幕......等等。

如果畫布上有一個現有項目 - 您必須擦除它（例如使用ctx.fillRect()或clearRect() ），然后繪制旋轉的對象。

如果您不確定如何在繪圖時旋轉它：

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

解決方案3
 18  2011-02-06 03:35:59

要旋轉單個對象，您必須設置變換矩陣。 這真的很簡單： 

 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);
 <canvas width="1280" height="720" id="pageCanvas"> You do not have a canvas enabled browser </canvas>

解決方案4
 9  2012-11-08 01:10:56

基本上，要使對象正確旋轉而沒有其他形狀旋轉，您需要：

  1. 保存上下文：ctx.save()
  2. 將樞軸點移動到所需位置： ctx.translate(200, 200);
  3. 旋轉：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
 3  2012-03-04 15:44:55

這個 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
 2  2013-02-18 09:09:22

<!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
 2  2014-12-15 22:55:50

要旋轉對象，您可以使用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
 1  2016-03-11 11:23:12

我發現這個問題是因為我在畫布上有一堆東西，用畫布線條繪制，煞費苦心，然后決定其中一些應該旋轉。 不想再做一大堆復雜的事情，我想輪換我擁有的東西。 我發現一個簡單的解決方案是這樣的：

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

無論如何 - 它可能不是特別優雅，但它是將一個特定元素旋轉到畫布上的一種非常簡單的方法。

看看所有這些旋轉的元素！

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 如何僅使用變換來旋轉 html 畫布形狀？ 如何在 Html5 Canvas 上旋轉、縮放和平移？ 如何將 object 與 canvas api 輪換，但之后什么也沒有？ 如何旋轉畫布中的對象 如何在畫布和 js 中旋轉對象； 我的例子沒有像我期望的那樣旋轉 如何復制 HTML5 CANVAS 標簽上的線段旋轉並將其放置在原始線段旁邊？ HTML5 Canvas-旋轉后如何獲取對象的絕對位置？ HTML 5畫布。 如何僅旋轉（保持旋轉）一個對象（&gt; 1）？ HTML5 Canvas旋轉單個元素 如何在 canvas,html5 中旋轉形狀？
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM