爲什麼不在一個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