基于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();
        }
           

图标效果图：