基于canvas繪圖應用程式圖示架構的建立

       在架構下繪制圖示是比較友善的，架構建立好以後，我們要做的就是向其中添加資料，利用canvas如何實作一個圖示架構呢？

  首先從定義開始：

var     canvas1 = document.getElementById('canvas1'),
            context1 = canvas1.getContext('2d'),
            canvas2 = document.getElementById('canvas2'),
            context2 = canvas2.getContext('2d'),

            fillColorSelect = document.getElementById('fillColorSelect'),
            strokeColorSelect = document.getElementById('strokeColorSelect'),
            lineWidthSelect = document.getElementById('lineWidthSelect'),
            eraserButton = document.getElementById('eraserButton'),

            GRID_COLOR = 'WhiteSmoke',
            GRID_STEPX = 10,
            GRID_STEPY = 10,

            //該定義中可以按照格式繼續添加圖示位置資訊
            ICON_RECTANGLES = [
                {x: 20.5, y: 15.5, width: 60, height: 60}
            ],

            //圖示類型,與圖示位置資訊配合使用
            LINE_ICON = 0,

            selectedRect = null,

            SHADOW_COLOR = 'rgba(0,0,0,0.5)',
            ICON_BACKGROUND_COLOR = 'RGB(216,191,216)',
            ICON_STROKE_STYLE = 'RGB(72,61,139)',

            


            kong = 0;</span>
           

關鍵點是 

ICON_RECTANGLES數組類和配合ICON_RECTANGLES使用的LINE_ICON(其後的數字其實是ICON_RECTANGLES的索引在圖示繪制函數中，用foreach對ICON_RECTANGLES進行搜尋，進而現實對定義的圖示位置資訊的應用，代碼如下：
           

<span style="font-family: Arial, Helvetica, sans-serif;">//繪制圖示，在canvas2圖示界面中進行繪制,先做好一個架構，後續再逐漸添加圖示</span>
           

function drawIcons() {
            context2.clearRect(0, 0, canvas2.width, canvas2.height);//清除繪制圖示界面
            //第一步，建構一個圖示位置庫，用數組類的形式存儲圖示資訊(ICON_RECTANGLES矩形數組），見全局定義
            //第二步，挨個繪制,圖示分選中的和非選中的，我們要求選中的有陰影效果
            ICON_RECTANGLES.forEach(function (rect) {

                context2.save();

                //設定一個選中參數selectedRect為flag,見全局定義
                if (selectedRect === rect) {
                    //setSelectedIconShadow();
                } else {
                    setIconShadow();
                }
                //設定圖示樣式
                context2.fillStyle = ICON_BACKGROUND_COLOR;
                context2.fillRect(rect.x, rect.y, rect.width, rect.height);

                context2.restore();

                //上面為準備工作，下面開始基于圖示位置庫繪制圖示
                drawIcon(rect);

            });
           

function drawIcon(rect) {
            context2.save();

            context2.strokeStyle = ICON_STROKE_STYLE;
            context2.strokeRect(rect.x, rect.y, rect.width, rect.height);

            if (rect.y === ICON_RECTANGLES[LINE_ICON].y) {
                drawLineIcon(rect);
            } else {
                //可以添加任意數量的判斷
            };

            context2.restore();
        }
           

圖示效果圖：