canvas简单画板笔记

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.功能栏选中状态函数

上图是获取整个功能栏标签并存入数组

下图为状态设置函数

总结暂时告一段落......