Javascript 可以在html5中翻译形状吗？

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

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

---

不，一旦它被绘制到画布上，您就不能再更改它了，您在画布上绘制的形状在内存中没有表示形式。但是，您可以在绘制形状之前打开画布，并在绘制形状之后重置变换（

canvas.setTransform（1,0,0,1,0,0）

）

编辑

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

清理画布

更新新时间范围内的对象

重新绘制画布

---

你可以找到一个教程

有几种不同的方法来设置动画和更改要绘制东西的位置。不管是哪种方式，如果你想要一个动画，你需要清理你的画布并继续画画——如果你愿意的话，就像一本活页书一样

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

• 移动到-移动到你的东西的新位置
• 平移-平移画布的中心点并保持图形位置不变，但移动基础坐标系
• .rect（newX、newY、高度、宽度）-绘制特定位置

我模拟了一个在画布上使用

translate

的（人为）示例，它将围绕光标的位置移动动画框。它是在循环中完成的——我建议查看Paul Irish关于更好的动画循环的文章。下面是一个例子：

---

正如前面回答中的评论所说，SVG维护一个对象模型，因此您可以引用页面上的对象，画布是一个位图API（基本上），一旦像素提交到画布上，就不会引用图形背后的方法或形状，画布API只是像素而已。

你尝试过这些吗？如果我有多个形状，它们都会被转换吗？你想制作动画吗？是的，我想制作动画画布不会跟踪你绘制的对象。您必须在每个动画帧上重新绘制整个画布。检查我的更新答案。或者在某些情况下，您可以将内嵌SVG与CSS动画一起使用，而不是使用画布。