Html5 canvas 使HTML5画布的行为类似于用于缩放/转换的TclTK画布？

我正在尝试将我20年前编写的一个TclTK程序移植到HTML5

经过几个小时的磨练，我了解到当你“缩放”或 “翻译”HTML5的画布元素，它只适用于未来 图形，而不是画布上已有的项目

这与TclTK相反，在TclTK中，画布上已经存在的项目是 改为缩放/转换

缺少创建绘制/重画循环（在这里我清除画布并 当我想要缩放/平移时，我自己重新绘制所有对象） 有没有办法让HTML5的画布元素表现得像Tltk的一样

---

还是我错过了什么大事

画布2D上下文基于像素级图像操作-它不是您显然熟悉的“保留模式”图形界面。实际上，没有可供重画的图形记录。如果你想改变图形，你必须以某种方式重新绘制它们

最后，一切都在重画（虽然重画可能会隐藏在代码中），但是有一些方法可以减少您必须做的工作量。以下是一些选项，大致按照您必须对代码进行的更改的数量（以及大致按照改进的质量/性能的顺序）：

• 在画布上绘制图形，然后使用CSS属性缩放和转换画布本身（而不是画布的宽度和高度属性，这将清除画布）。这将重新缩放图像，可能会丢失质量，因为您没有针对当前比例重新优化绘制图像

• 在画布上绘制图形，然后将其导出到

  ImageData

  或数据URL中，然后在需要时将其重新绘制到画布上。同样，可能会失去质量

以上两个基本上都是为了继续使用您已经编写的canvas代码。要获得像您描述的TK那样的适当系统，您需要：

• 构建自己的场景图：创建一组对象，如表示图形的

  圆

  、

  线

  ，以及存储变换属性（如比例和位置）的容器。然后编写例程来遍历此图形，并在需要重画时执行相应的绘图命令

• 改用。SVG是一种矢量图形语言，在现代浏览器中，您可以直接将其嵌入HTML中，并像处理页面其余部分一样使用JavaScript进行操作。在SVG中，您可以简单地更改scale属性并获得预期的更改
  （前面的选项基本上是重新设计少量SVG。）