我正在尝试将我20年前写的TclTK程序移植到HTML5。
经过几个小时的挫折之后，我才知道当你“缩放”或者 “翻译”HTML5的canvas元素，它只适用于未来 图纸，而不是画布上已有的项目。
这与TclTK相反，其中画布上的项目是 缩放/翻译。
创建绘制/重绘循环（我清除画布和 当我想缩放/翻译时，我自己重绘所有对象，是 无论如何要使HTML5的canvas元素表现得像TclTK？
或者我错过了什么大事？
答案 0 :(得分：1)
Canvas 2D Context基于像素方式的图像处理 - 它不是您熟悉的“保留模式”图形界面。字面上没有你的图形记录重绘。如果你想改变图形，你必须以某种方式重绘它们。
最终所有东西都在重绘（虽然重绘可能会隐藏在您的代码中），但有一些方法可以减少您必须完成的工作量。以下是一些选项，大致按照您需要对代码进行的更改量的顺序（大致按质量/性能改进的顺序）：
在画布上绘制图形，然后使用CSS属性缩放和平移画布本身（不画布的宽度和高度属性，这将清除它）。这将重新缩放图像，可能会丢失质量，因为您没有针对当前比例重新优化图像。
在画布上绘制图形，然后将它们导出到ImageData或数据URL，然后在需要时将其重绘到画布上。再次，可能会失去质量。
以上两个基本上是使用您已编写的画布代码的kludges。为了得到一个像你描述TK那样的合适系统，你想要：
构建自己的场景图：创建一组对象，如Circle，Line等代表图形的对象，以及存储变换属性（如缩放和位置）的容器。然后编写例程来遍历此图并在需要重绘时执行相应的绘图命令。
请改用SVG。 SVG是一种矢量图形语言，在现代浏览器中，您可以直接嵌入HTML中，并像在页面的其余部分一样在JavaScript中进行操作。在SVG中，您只需更改缩放属性并获得您希望看到的更改。
（之前的选项基本上是重新发明少量的SVG。）