基于HTML5 canvas的画图板设计

论文总字数：10379字

目 录

1课题选择背景6

2课题可行性分析6

3采用的技术及开发工具6

3.1 HTML5 6

3.2 Canvas标签6

3.3 HTML框架以及JS框架6

3.3.1 Angular JS简介6

3.3.2 bootstrap 简介7

4功能设计7

4.1 需求设计 7

4.2设计原理7

5功能实现8

5.1前端UI布局的实现 8

5.2鼠标绘图功能实现过程9

5.2.1 自定义线条绘制9

5.2.2 直线绘制10

5.2.3 矩形绘制10

5.2.4 圆形绘制10

5.2.5 具体实现代码11

5.3页面图片添加滤镜 15

5.3.1灰色滤镜15

5.3.2黑白滤镜16

5.3.3底片滤镜17

5.3.4模糊滤镜18

5.3.5马塞克滤镜19

5.4运行配置及代码调试20

6结论21

参考文献22

致谢23

基于HTML5 canvas的画图板设计

，China

Abstract: HTML5 is a giant leap to the web Development standards in this ten years,the canvas in it is the most spectacular.Using canvas to draw a picture in the web page has been widely applied to the production and life of us.

In this article,first we will make a general introduction to the HTML5,canvas and the framework we have used.The second,I will focused on introducing how to use context.getContext() to get the canvas context object ,make strokearc(),strokeRect() and other methods incloded in this object binding to the mouse operation, to realize the function of drawing board page, And throuhg the getimageData() to get the picture data object ,we can change the pixel information in this object to realize the pictures add grey filter, black and white film filter, Mosaic filter, concrete train of thought and method of fuzzy filters. Finally, a brief explanation to run the whole design and how to use Chrome(Google browser) to debug the code.

.Key words：web front-end；HTML5;Canvas;

1 课题选择背景

随着互联网技术的日益发展，HTML5这一新兴技术逐渐被人们所熟知与使用。它将web带入一个更加成熟的平台。而其中最令人瞩目的便是canvas标签，其可以更加灵活的在页面中实现绘图以及对图片编辑的操作。为帮助自己更好的理解和掌握canvas页面绘图技术，特选择此课题进行研究。

2 课题可行性分析

技术可行性：掌握C语言，Java语言基础，有良好的逻辑思维能力以及规范的代码格式标准。

经济可行性：对本文所用的一些基础的技术有良好的掌握，不需要再通过额外的培训方式来学习，本文中的所选用的angularJS,bootstrap,nodeJs，HTML5等均为开源项目，无需花费额外金钱。。

时间周期可行性：通过bootstrap，AngualrJS框架的使用，可以必要的缩短开发的周期，同时个人对HTML标签，CSS样式已有较为深入的理解，因此在开发的时间周期上是可行的。

3采用的技术及开发工具

3.1 HTML5

HTML5是最新一代的HTML标准，它不仅拥有HTML中所有的特性，而且增加了许多实用的特性，如视频、音频、画布（canvas）等。2012年12月17日，万维网联盟（W3C）正式宣布凝结了大量网络工作者心血的HTML5规范已经正式定稿。根据W3C的发言稿称：“HTML5是开放的Web网络平台的奠基石。

本文便是基于HTML 5为我们所提供的名为canvas画布这个标签元素进行的。canvas表面上和其他HTML标签没什么不同，但实质上，他为我们提供了丰富的API接口，通过调用这些接口方法，便可以实现预期的绘图以及图片滤镜添加的功能。

3.2 Canvas标签

在新的HTML标准HTML5中，canvas元素表示一个画布元素，呈矩形，他没有自己的行为，和其他HTML标签元素一样，仅仅是一个标签，但是它定义了一个API支持脚本化客户端绘图操作，依托于ccontext这一上下文环境变量，调用其中的context.stroke()、context.arct()、context.strokeRect()，可以进行线条，矩形，圆形的绘制。调用context.getImagedata()方法，可以获取到画布中的每一个像素信息，通过修改不同的像素信息可以对图片进行不同的效果变换。

3.3 HTML框架以及JS框架

3.3.1 bootstrap 简介

Bootstrap是由两个Twitter员工开发的一款前端UI开源框架，目前最新版本已经到3.3.5，它其中的一大优势是他基于Less打造，并且有Sass版本。因此，这款框架一推出就包含了一个非常实用的Mixin库来供我们调用。在开发过程中，我们只需要查看API使用对应的类名，便可获取该类名下对应的CSS样式。这样可以必要的提高我们的开发效率。本文最显著的一点是利用了其中的栅格布局，来实现整个页面的动态自适应，当页面宽度较小时，整个页面的布局会进行动态的切换。在本次设计的一些细节上，例如按钮，按钮上的图标等同样使用了bootstrap中的样式。

3.3.2 Angular JS简介

本次设计的JavaScript框架选用AngularJS，通过其中的模块依赖注入，双向数据绑定，指令操作等功能，可以很好的实现模块化开发，减少直接通过JS脚本来直接操作DOM元素。这两点帮助我们降低了JS脚本与DOM元素的耦合度，更方便我们对项目的开发与维护。

4功能设计

4.1 需求设计

整个设计分为两个模块，第一是对图片的编辑模块，第二是使用canvas实现页面绘图的效果。两个模块是相互独立的，通过配置AngularJS路由，实现页面不同功能部分的异步动态切换，其他公用的部分保持不变。

其中图片编辑的模块主要包括对图片添加灰色滤镜、马赛克滤镜、模糊滤镜，黑白滤镜，底片滤镜，黑白滤镜。效果的触发通过绑定到对应的按钮上，通过点击按钮的方式触发生成对应的滤镜效果。

相较于传统的直接在JS脚本中编写完整的绘图方法，只需执行JS脚本便可在页面中绘制出目标图形，本文在这基础之上对其进行的一定的优化，通过对鼠标在canvas画布元素上不同事件的监听，在触发不同鼠标事件时注入相应的绘图操作，实现了将鼠标作为画笔，在页面中进行绘图的功能。

4.2设计原理

项目目录结构如下；

Graduaion project

|______CSS

|______JS

| |____controller

| |____app.js
|______templates

|______img

|______lib

|______index.html

CSS文件夹用于放置需要用到的bootstrap样式库以及自己写的外部样式表，JS文件夹中的app.js用于配置整个项目的路由。controller文件夹用于放置对应模块的JavaScript脚本。templates文件夹下用来存放不同模块的html文件。img和lib文件夹用于放置我们的图片以及需要用到的JS库。最后通过在index.html中对我们需要用到的CSS，JS进行引入，同时把不同功能组装成功的layout.html在此处进行展示。 如图4-1。

图4-1 模块设计树状图

图中的每个模块都可以看作是彼此独立的，他们各自有各自的view层，controller层，以及service层。由此便体现出了模块化开发以及MVC的开发思想。

5功能实现

5.1前端UI布局的实现

整个前端页面包含三个主要部分，头部，中间功能展示部分，底部，其中头部与底部为两个功能模块的公共部分，中间的功能展示部分通过头部的导航按钮进行切换。如图5-1

图5-1 页面布局原型图

页面的中间功能展示区，都采用bootstrap的栅格布局，当页面足够大时分为左右两个部分，左侧为对应功能模块下的绘图区，图片展示区。右侧为绘图工具选择以及滤镜效果选择的操作区。当页面较小时，右侧会自动移动到左侧的下方，成一列布局。如图5-2：

剩余内容已隐藏，请支付后下载全文，论文总字数：10379字

相关图片展示：