基于canvas绘图应用程序图标框架的建立

来源：互联网发布：淘宝扣分12分会怎么样编辑：程序博客网时间：2024/04/30 13:07

在框架下绘制图标是比较方便的，框架建立好以后，我们要做的就是向其中添加数据，利用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();        }

图标效果图：

0 0