# Scrawl

**Repository Path**: codeme.com/Scrawl

## Basic Information

- **Project Name**: Scrawl
- **Description**: html5 画板
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2018-12-24
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

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

本程序必须使用google chrome浏览器运行
因为所有样式及脚本都是用webkit API进行编写
此程序主要目的是复习一下html5 canvas画布及一些特性
此程序共历时9天，从2013年10月24日至2013年11月1日，算是给小光棍们一个福利！
************************************************************************


**********************************************************************
=====所用技术=======
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：codeme9@gmail.com
Date：2013-11-01


************************************************************************

#### 码云特技

1. 使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md
2. 码云官方博客 [blog.gitee.com](https://blog.gitee.com)
3. 你可以 [https://gitee.com/explore](https://gitee.com/explore) 这个地址来了解码云上的优秀开源项目
4. [GVP](https://gitee.com/gvp) 全称是码云最有价值开源项目，是码云综合评定出的优秀开源项目
5. 码云官方提供的使用手册 [https://gitee.com/help](https://gitee.com/help)
6. 码云封面人物是一档用来展示码云会员风采的栏目 [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)