我正在尝试移植20年前写入HTML5的TclTK程序。使HTML5画布的行为像TclTK画布的缩放/翻译？
经过数小时的沮丧，我了解到当您“缩放”或“翻译”HTML5的画布元素时，它仅适用于未来的 图形，而不是画布上已有的项目。
这与TclTK相反，其中画布上已有的项目是 而不是缩放/翻译。
短创造了战平/重绘循环（这里我清除画布和重绘 所有对象自己，当我要缩放/翻译），是 反正有使HTML5的画布元素表现得像TclTK的？
或者我错过了一些大事？
画布2D上下文基于像素方式的图像操作 - 它不是像您所熟悉的“保留模式”图形界面。从字面上看，它没有记录您的图形重绘。如果你想改变图形，你必须以某种方式重新绘制它们。
最后一切都在重新绘制（虽然重绘可能隐藏在您的代码中），但有一些方法可以减少您必须执行的工作量。这里有一些选择，大致变化量的顺序，你必须做你的代码（大致质量的提高/性能顺序）：
画在画布上的图形，然后扩展和使用CSS属性翻译画布本身（而不是画布的宽度和高度属性，这将清除它）。这将重新缩放图像，可能会损失质量，因为您没有为当前比例重新绘制图像。
在画布上绘制图形，然后将它们导出到ImageData或数据URL中，然后在需要时将其重绘到画布上。再一次，可能会失去质量。
上述两个基本上是继续使用您已经写好的画布代码的杂物。为了得到一个合适的系统，像你描述的TK为，你想：
构建自己的场景图：创建像Circle，Line等代表的图形对象的集合，而对于那些容器，存储转换属性，如比例和位置。然后编写例程来遍历此图并在需要重绘时执行相应的绘图命令。
改为使用SVG。 SVG是一种矢量图形语言，在现代浏览器中，您可以直接嵌入到HTML中，并使用JavaScript操作，就像在页面的其他部分一样。在SVG中，您可以简单地更改比例属性并获取您希望看到的更改。
（先前的选项基本上重塑SVG少量。）