如何在html 5画布上旋转单个对象？ [英] How do I rotate a single object on an html 5 canvas?

问题描述

我想弄清楚如何在html 5画布上旋转单个对象。

I'm trying to figure out how to rotate a single object on an html 5 canvas.

例如： http://screencast.com/ t / NTQ5M2E3Mzct - 我想让这些卡中的每一张都以不同的度数旋转。

For example: http://screencast.com/t/NTQ5M2E3Mzct - I want each one of those cards to be rotated at a different degree.

到目前为止，我所看到的都是文章和示例它演示了旋转整个画布的方法。现在，我想我必须旋转画布，绘制一个图像，然后将画布回到它的原始位置，然后再绘制第二个图像。如果是这样，那么只是让我知道！

So far, all I've seen are articles and examples that demonstrate ways to rotate the entire canvas. Right now, I'm guessing I'll have to rotate the canvas, draw an image, and then rotate the canvas back to it's original position before drawing the second image. If that's the case, then just let me know! I just have a feeling that there's another way.

任何人都有什么想法？

提前感谢！ / p>

Thanks in advance!

推荐答案

不幸的是，在HTML5 canvas元素中，不能旋转单个元素。

Unfortunately in the HTML5 canvas element you can't rotate individual elements.

动画工作就像在MS绘画绘图：你画东西，做一个屏幕..使用橡皮擦删除一些东西，绘制不同的东西，做一个屏幕..绘制

Animation works like drawing in MS Paint: You draw something, make a screen.. use the eraser to remove some stuff, draw something differently, make a screen.. Draw something else on top, make a screen.. etc etc.

如果你在画布上有一个现有的项目，你必须删除它（使用 ctx.fillRect（）或 clearRect（）），然后绘制旋转的对象。

If you have an existing item on the canvas - you'll have to erase it ( use ctx.fillRect() or clearRect() for example ), and then draw the rotated object.

如果您不确定如何在绘制第一个位置时旋转它：

If you're not sure how to rotate it while drawing in the first place:

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

这篇关于如何在html 5画布上旋转单个对象？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！