为什么不在一个div中翻译canvas的作品？

Question

我在一个div中有2个画布。我试图翻译一个画布，但没有奏效。

http://jsfiddle.net/VkbV5/显示了我评论过翻译线的情况下：

this.innerElement2Ctx.translate(100,100); 

但是当我包括行了，小方就消失了。为什么？ 如果你在浏览器中运行这个页面并检查innerElement2，你会发现它根本没有移动，但是小方块消失了。因为我打算将鼠标事件附加到innerElement2，所以我需要2个画布。

Answer 1

翻译上下文可调整0,0点用于未来绘图命令的位置;缩放上下文可调整在画布上绘制大小的项目的大小;旋转上下文可调整项目绘制的方向。这些上下文转换都不会调整画布框本身的大小或位置。

这里是我做了调整画布改造，使吸取同一命令允许用户缩放和平移围绕画布绘制一个例子：如果你想内移动画布的位置
http://phrogz.net/tmp/canvas_zoom_to_cursor.html

您HTML页面，像使用其他元素一样使用简单的CSS布局，例如一个<div>。

如果您想要复杂的2D或3D转换，您可以使用CSS的尖端功能（由现代浏览器支持）。例如，请参阅：
https://developer.mozilla.org/en/CSS/transform#CSS_transform_functions