如何在 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.

有人知道吗?

提前致谢！

推荐答案

遗憾的是，在 HTML5 画布元素中您无法旋转单个元素.

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

动画就像在 MS Paint 中绘图一样:你画一些东西，制作一个屏幕......使用橡皮擦去除一些东西，绘制不同的东西，制作一个屏幕......在上面绘制其他东西，制作一个屏幕......等等.

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屋！