文章出處
文章列表
多個canvas畫布
從下面的截圖我們可以看到有5個canvasDOM元素，id分別為canvas，ghostCanvas，HitCanvas，gridCanvas和animation_canvas，這里我們先介紹前4個canvas的作用。從源碼里可以看到這幾個canvas的大小都是一樣的。如果利用《軟件項目技術點(2)——Canvas之獲取Canvas當前坐標系矩陣》中介紹的getTeansform方法獲取畫布矩陣的6個值也是一樣的。
canvas 主畫布
正常狀態下繪制所有元素在canvas主畫布上面，包括移動旋轉縮放畫布時，及主循環一直在循環時也是在不斷把所有元素繪制到canvas上。
如下圖所示有文字元素，圖片元素，圖形元素等，都是繪制到canvas上
ghostCanvas 編輯狀態
當點擊選中某個元素，對該元素進行編輯時（編輯主要指大小，角度，位置坐標及其他屬性如顏色等），因為主要改變的是一個或幾個元素所以將其繪制到ghostCanvas上面，未選中編輯的其他元素仍在主畫布canvas上維持原狀。
如下圖箭頭圖被選中，那么這張圖片是繪制到了ghostCanvas上面。
gridCanvas 網格線
繪制如下圖中的一條條網格線，其中有大格子和小格子。后面有具體講解網格線的畫法《軟件項目技術點(5)——在canvas上繪制動態網格線》
hitCanvas 元素影子
我們通過改變hitCanvas標簽的樣式將其顯示出來，可以看到它上面繪制的是一個一個矩形塊。并且每個矩形塊的顏色都是不一樣的，為什么不一樣呢？后面看到《軟件項目技術點(4)——實現點擊畫布上元素》就明白這里的巧妙了
文章列表
全站熱搜
留言列表
