demo完成图片预览
项目分析
1.要实现这个画板首先我们需要完成它的html和css代码,在此不多最叙述。
2.分析功能
2.1工具栏
工具栏分为画笔,橡皮,油漆桶,吸管,填充字,放大镜。
画笔功能:当我们选中画笔后鼠标按下时获取当前相对于canvas画布的坐标
在鼠标移动时持续画线
在鼠标松开时
代码基础想法:
橡皮功能:在鼠标按下时获取当前坐标并使用clearRect以宽高各位10px清除画布
鼠标移动时持续清除
鼠标松开时结束功能,并注意设置鼠标移出画布时为null
油漆桶功能:在鼠标按下时获取当前坐标并使用fillRect对整张画布进行颜色填充,并将鼠标移动、松开与移出时设置为null。
吸管功能:在鼠标按下时获取当前坐标并使用getImageData对当前坐标进行1px的颜色采集 getImageData(采集像素的x,采集像素的y,采集像素的宽,采集像素的高),新建一个对象来储存放回的对象。obj.data[]中以数组形式存放着像素信息,四个数据一组分别是[红,绿,蓝,透明度],如果有多个像素则如此循环存放。将获取的值返回给strokeColor和fillColor。ex:var color = 'rgb(' + obj.data[0] + ',' + obj.data[1] + ',' + obj.data[2] + ')'; 在鼠标松开、移动、移出时置为null。
填充字功能:在鼠标按下时 window.prompt('提示信息','默认信息') 使用prompt弹出提示框提醒用户输入要键入的文字,同样并获取到当前的坐标。fillText方法填入文字 fillText(填入的文字,坐标x,坐标y)。 在鼠标松开、移动、移出时置为null。
放大镜功能:
2.2形状栏
线段功能:
圆形功能:
主要是在鼠标放开时计算半径和圆点,其他内容重复不再赘述。
矩形功能:
代码相似主要是用strokeRect(起始点x,起始点y,宽,高);
多边形功能:
以等腰三角形为例
圆形填充与矩形填充不再赘述 将stroke改为fill
2.3线宽栏
2.4颜色栏
3.功能栏选中状态函数
上图是获取整个功能栏标签并存入数组
下图为状态设置函数
总结暂时告一段落......