html5 css3 jquery 画板

采用html5 canvas + css3 + jquery 写的涂鸦画板，以前为了学习h5 新特性做的一个小玩意，功能有打开图片，支持拖拽到画布中加载；

画笔功能、毛笔刷、插入文字，画直线、圆形、方形、等，可动态改变画布大小，支持橡皮擦，放大缩小，喷桶、吸管等工具，所有画笔支持颜色选择，支持css3的新滤镜功能，以及模仿ps做的图片复古、反色、素描、朦胧、雕刻、镜像等功能。

 

Css滤镜效果

 

各种图形，画笔等效果，可动态改变粗细，大小

 

模仿PS中朦胧、镜像、复古等功能。

 

可插向画板中插入文字，回退上一步编辑、本地缓存等功能。

 

学习时从网上找了两个算法，画出的效果图…

 

 

 

 

设置画布大小

 

下面这个是根据网上一个算法做的一个千变万化的画图功能，根据top、right、bottom、left 速度，颜色等设置，可动态画出你想想不到的图形，特别艺术。

 

 

源码中层次分明

 

 

**********************************************************************
=====特别说明=======

本程序必须使用google chrome浏览器运行
因为所有样式及脚本都是用webkit API进行编写
此程序主要目的是复习一下html5 canvas画布及一些特性
************************************************************************

**********************************************************************
=====所用技术=======
html5+css3
布局为div table canvas 布局，最传统的绝对定位

主画布采用div+2张canvas，用div是组选方便，两张画布是用双缓冲解决画笔颜色等问题，当然也可以用还原点

工具栏用table布局,所有图标都为png图片，为了偷懒，每个图标都用一个图片，这里应该把所有图标合成一副图像，然后用css sprite做！！

工具栏弹出窗口用div+table 或div加超链接做成，主要技术是css修饰弹出层样式，jQuery控制显示隐藏及特效，定义一个拖拽类来注册拖拽元素

保存图片区域用div+table，效果是css3+jQuery特效做的，保存图片涉及到了本地化存储localStorage

修改图片效果一种是css3滤镜，另一种是rgba转换，rgba转换算法网上有很多！

下载与保存图像用了dataURI 也就是data协议的东西，画布有toDataUrl方法

所有画图形算法在w3school网站上都有例子，把定制改为鼠标位置就可以了，主要是4个事件：鼠标按下时初始鼠标位置参数，context参数等；
鼠标移动是根据鼠标位置画线，鼠标抬起时把缓存图像画到画布上，鼠标移出时根据不同画笔工具处理各种业务。

放大缩小是zoom做的，后来发现有scale()方法，为了偷懒没有修改；

时钟是修改了网上的代码，直接加上的

动态画图的功能也是借鉴了网上一个功能修改的，添加了颜色，速度，拖拽角度，随机颜色等功能

图片旋转控件时一个图片把边框修饰为圆形了再加上拖动效果，图片上面画了热点，点击热点用css旋转做的

打开图片用的是input type=file 做的，这里涉及到ImageReader，这个类很强大，js终于能玩二进制数据了！！！！

拖拽本地图片直接添加到画布用的是drop事件做的，原理跟input type=file差不多

最后，由于开始只为了玩玩画线，没想做这么多功能，所以没有规划，所有功能都是想一个添加一个，导致后期很多bug，最明显的就是更改画布尺寸后
没有重置全局变量，导致画笔再画的时候位置偏离，添加一个函数closeResizeWin，把设计画布尺寸改变地方都调用一下这个函数就哦了！

详细了解请看注释！

Author：WangTao
emailto：[email protected]
Date：2013-11-01

源码下载地址：https://download.****.net/download/taoge2121/10759776