html0504 基于HTML5的涂鸦系统的设计与实现

摘  要

    Web2.0带来的丰富互联网技术让所有人都享受到了技术发展和体验进步的乐趣。而作为下一代互联网标准，HTML5自然也是备受期待和瞩目。HTML5是近十年来Web开发标准巨大的飞跃。和以前的版本不同，HTML5并非仅仅用来表示Web内容，它的新使命是将Web带入一个成熟的应用平台，在HTML5平台上，视频、音频、图象、动画，以及同电脑的交互都被标准化。现阶段对于HTML5技术的研发和开发工作主要集中在技术草案的确立与新互联网应用的开发上，而随着互联网的发展，HTML标准也在不断变化，HTML标准已经走过第4代了，因为它能够用简单的标签元素，代替属性能实现之前需要用很多复杂JavaScript代码才能有实现的功能，HTML5越来越受到欢迎。

    HTML5带来很多令人激动的新特性，这在之前的HTML中是不可见到的。其中一个最值得提及的特性就是用于绘画的 HTML Canvas，可以对2D或位图进行动态、脚本的渲染。本文详细分析了HTML5技术的简介和发展前景，并深入探讨了HTML5引入的核心标签Canvas元素，介绍了Canvas可以实现的主要功能，在此基础上实现了部分类似Windows画图板的功能，包括铅笔、图章仿制、画直线、圆、矩形、橡皮擦、背景图、取色板、插入文字等功能，在实现过程中也利用了最新的CSS3技术，最后再次总结了这次毕设的经验和对未来的展望。

    本文针对其引入的Canvas绘图元素进行了深入的研究，此元素可以替代画图作为动画渲染的工具，效率与安全性更高，开发更便捷，必将是以后的动画，游戏等应用首选的开发方式，前景非常好。

【关键词】Web2.0  HTML5  CSS3  Canvas

目  录
前  言    - 1 -
第一章  关于HTML5和画图板    - 2 -
第一节 HTML5简介    - 2 -
第二节 HTML5特性    - 2 -
第三节 HTML5国内外发展现状    - 3 -
第四节 画图工具    - 4 -
第二章  相关技术简介    - 5 -
第一节 Canvas元素简介    - 5 -
第二节 第一个Canvas程序的实现    - 5 -
第三节 JavaScript及jQuery简介    - 7 -
第四节 CSS3简介    - 9 -
第五节 开发工具DreamWeaver介绍    - 12 -
第六节 调试工具Firefox及Firebug简介    - 13 -
第三章  功能设计    - 15 -
第一节 需求设计    - 15 -
第二节 基本原理    - 16 -
第三节 布局及界面设计    - 17 -
图3.3 Window画图板    - 18 -
第四节 JavaScript设计    - 18 -
第四章  功能的实现    - 19 -
第一节 简单功能的实现    - 19 -
第二节 前台显示实现    - 23 -
第三节 JavaScript画图实现    - 24 -
第四节 最终效果    - 31 -
第五节 不足之处    - 37 -
第五章  系统测试    - 37 -
第一节 概念和意义    - 37 -
第二节 特性    - 38 -
第三节 重要性    - 38 -
第四节 本系统测试描述    - 38 -
第六章  结束语    - 39 -
参考文献    - 41 -
附  录    - 42 -