是否可以在html5中翻译形状？

Question

我想知道Html5是否支持画布中的形状转换。例如，我有一个矩形，是否可以对其应用转换？

canvas = document.getElementById('Canvas');
context =canvas.getContext('2d');
context.rect(myRectangle.x,myRectangle.y,myRectangle.width,myRectangle.height);

Answer 1

有一些不同的方法可用于动画和更改您想要绘制物品的位置。无论哪种方式，如果你在动画之后，你将需要清理你的画布并继续绘画 - 如果你愿意的话就像翻书一样。

设置新绘制项目的选择包括：

• moveTo - 移动到你的东西的新位置
• translate - 翻译画布的中心点并保持绘图位置相同，但移动基础坐标系
• .rect（newX，newY，height，width） - 绘制特定位置

我在画布上模拟了一个（人为的）使用translate的例子 - 它将动画框移动到光标位置周围。它是在一个循环中完成的 - 我建议查看Paul Irish关于requestAnimFrame的文章以获得更好的动画循环。以下是示例：http://jsbin.com/afofur/2/edit#preview

正如上一个答案中的评论所说 - SVG维护一个对象模型，所以你可以在页面上引用对象，canvas是一个位图API（基本上），一旦像素被提交到画布，就没有引用在绘图背后的方法或形状，它只是画布API的像素。

Answer 2

不，一旦它被绘制到画布上就不能再改变它了，你在画布上绘制的形状没有内存表示。但是，在绘制形状之前可以transform画布，并在绘制形状后重置变换（canvas.setTransform(1, 0, 0, 1, 0, 0)）。

修改

请记住，canvas API不会跟踪您绘制的对象。它只是用一种颜色填充像素，你要求它绘制一个矩形。如果要制作动画，则必须跟踪自己绘制的矩形（制作具有x，y，宽度，高度属性的对象）。然后，您必须在每个动画步骤中执行以下操作：

1. 清除画布
2. 更新新时间范围的对象
3. 重绘画布

您可以找到教程here。