《嵌入式软件编程》课程报告模板.docx
《《嵌入式软件编程》课程报告模板.docx》由会员分享，可在线阅读，更多相关《《嵌入式软件编程》课程报告模板.docx（26页珍藏版）》请在冰豆网上搜索。
《嵌入式软件编程》课程报告模板
天津电子信息职业技术学院
《嵌入式软件编程》课程报告
论文题目
：
此处填写论文题目
姓名
：
姓名（班内顺序号）
系别
：
网络技术系
专业
：
计算机控制技术或者物联网应用技术
班级
：
计控S11-1或者物联11-1
指导教师
：
白志杰
摘要
HTML5将成为HTML、XHTML以HTMLDOM的新标准。
HTML的上一个版本诞生于1999年。
自从那以后，Web世界已经经历了巨变。
HTML5有两大特点：
首先，强化了Web网页的表现性能；其次，追加了本地数据库等Web应用的功能。
广义论及HTML5时，实际指的是包括HTML、CSS和JavaScript在内的一套技术组合。
它希望能够减少浏览器对于需要插件的丰富性网络应用服务（plug-in-basedrichinternetapplication，RIA），如AdobeFlash、MicrosoftSilverlight，与OracleJavaFX的需求，并且提供更多能有效增强网络应用的标准集。
HTML5特性：
Canvas、WebGL、SVG、Video、Form、选择器、本地储存、本地数据库、离线应用、后台异步化、双向信息传输、桌面提醒、拖拽、地理位置定位。
关键字HTML5Canvas
目录
一、概述1
二、HTML5基础之Canvas2
2.1什么是Canvas2
2.2Canvas的坐标2
2.3开始第一步3
2.4绘图工具、效果和转换4
2.4.1绘制线段4
2.4.2绘制矩形7
2.4.3绘制圆弧、曲线、圆和半圆9
2.4.4二次曲线9
2.4.5贝塞尔曲线9
2.4.6转换：
平移、缩放和旋转13
2.5渐变15
三、结论19
四、参考文献19
一、概述
HTML标准自1999年12月发布的HTML4.01后，后继的HTML5和其它标准被束之高阁，为了推动web标准化运动的发展，一些公司联合起来，成立了一个叫做WebHypertextApplicationTechnologyWorkingGroup（Web超文本应用技术工作组-WHATWG）的组织。
WHATWG致力于web表单和应用程序，而W3C（WorldWideWebConsortium，万维网联盟）专注于XHTML2.0。
在2006年，双方决定进行合作，来创建一个新版本的HTML。
HTML5草案的前身名为WebApplications1.0，于2004年被WHATWG提出，於2007年被W3C接纳，并成立了新的HTML工作团队。
HTML5的第一份正式草案已于2008年1月22日公布。
HTML5仍处于完善之中。
然而，大部分现代浏览器已经具备了某些HTML5支持。
HTML5的特性：
A.语义特性（Class：
Semantic）
HTML5赋予网页更好的意义和结构。
更加丰富的标签将随着对RDFa的，微数据与微格式等方面的支持，构建对程序、对用户都更有价值的数据驱动的Web。
B.本地存储特性（Class:
OFFLINE&STORAGE）
基于HTML5开发的网页APP拥有更短的启动时间，更快的联网速度，这些全得益于HTML5APPCache，以及本地存储功能。
IndexedDB（html5本地存储最重要的技术之一）和API说明文档。
C.设备兼容特性（Class:
DEVICEACCESS）
从Geolocation功能的API文档公开以来，HTML5为网页应用开发者们提供了更多功能上的优化选择，带来了更多体验功能的优势。
HTML5提供了前所未有的数据与应用接入开放接口。
使外部应用可以直接与浏览器内部的数据直接相连，例如视频影音可直接与microphones及摄像头相联
D.连接特性（Class:
CONNECTIVITY）
更有效的连接工作效率，使得基于页面的实时聊天，更快速的网页游戏体验，更优化的在线交流得到了实现。
HTML5拥有更有效的服务器推送技术，Server-SentEvent和WebSockets就是其中的两个特性，这两个特性能够帮助我们实现服务器将数据’推送’到客户端的功能。
E.网页多媒体特性（Class:
MULTIMEDIA）
支持网页端的Audio、Video等多媒体功能，与网站自带的APPS，摄像头，影音功能相得益彰。
F.三维、图形及特效特性（Class:
3D,Graphics&Effects）
基于SVG、Canvas、WebGL及CSS3的3D功能，用户会惊叹于在浏览器中，所呈现的惊人视觉效果。
G.性能与集成特性（Class:
Performance&Integration）
没有用户会永远等待你的Loading——HML5会通过XMLHttpRequest2等技术，帮助您的Web应用和网站在多样化的环境中更快速的工作。
H.CSS3特性（Class:
CSS3）
在不牺牲性能和语义结构的前提下，CSS3中提供了更多的风格和更强的效果。
此外，较之以前的Web排版，Web的开放字体格式（WOFF）也提供了更高的灵活性和控制性。
二、HTML5基础之Canvas
2.1什么是Canvas
HTML5Canvas（画布）是一个非常有用的绘图和动画元素，Canvas使用JavaScript来直接在页面上绘制图形。
这是一个由你来定义和控制的长方形区域，该区域允许动态、可脚本渲染的2D图形和位图图像。
在制作用来增强UI、示意图、相册、图表、图形、动画和嵌入式绘图应用的那些非常棒的视觉材料方面，HTML5堪称完美。
Canvas元素有一些用来绘制路径、矩形、圆形和字符的方法。
2.2Canvas的坐标
在画布上绘图的一个先决条件是要熟悉网格或是坐标空间，宽度和高度的空间区域测量是以像素为单位给出的。
画布是基于x和y坐标的使用来构建的，画布的x=0,y=0坐标位于左上角。
画布的矩形区域的默认属性是300像素的宽度和150像素的高度，但你可以通过指定宽度和高度来确定画布元素的确切大小。
图1中的示意图说明了x和y坐标的实现方式。
图1Canvas的坐标
图1给出了一个100像素X100像素的画布区
1.左上角是x=0，y=0。
2.x的值水平增加，y的值垂直增加。
3.右下角是x=100，y=100。
4.中间的点是x=50，y=50。
2.3开始第一步
要在画布上放置任何东西的话，首先必须在HTML文件中定义画布。
必须创建访问
canvas元素自身有两个属性：
width和height，除此之外，canvas还拥有所有主要的HTML5属性，比如说class、id和name等。
id属性被用在上面所示的代码中，JavaScript使用这里创建的canvas的id来表示要在上面绘画的画布。
JavaScript使用document.getElementById（）方法来确定正确的画布，如下面代码所示：
varcanvas=document.getElementById（"xuliangCanvas"）;
每个画布都必须要有一个context（上下文）的定义，如下面代码所示。
就目前的情况来说，官方规范只承认一个2D环境：
varcontext=canvas.getContext（"2d"）;
在标识画布并指明了它的上下文之后，就做好了开始绘画的准备了。
2.4绘图工具、效果和转换
在HTML5Canvas的这一讨论过程中，对各种绘图工具、效果和转换都查看一番。
绘图工具包括：
1.线条
2.矩形
3.圆弧
4.贝塞尔曲线和二次曲线
5.圆和半圆
会用到的Canvas效果包括：
1.填充和描边
2.线性和径向的渐变
要讨论的转换包括：
1.缩放
2.旋转
3.平移
2.4.1绘制线段
要在画布上绘制线段的话，可以使用moveTo（）、lineTo（）和stroke（）方法，此外，要使用beginPath（）方法来重置当前路径：
1.context.beginPath（）;
2.Context.moveTo（x,y）;
3.Context.lineTo（x,y）;
4.Context.stroke（x,y）;
beginPath（）方法开始一条新的路径，在使用不同的子路径绘制一条新的线段之前，必须要使用beginPath（）来标明一个绘制过程要遵循的新起点。
在绘制第一条线段时，beginPath（）方法的调用不是必须的。
moveTo（）方法指明新的子路径从哪里开始，lineTo（）方法创建子路径。
可以使用lineWidth和strokeStyle来改变线段的外观，lineWidth元素改变线段的粗细，strokeStyle改变颜色。
在图2中，三条线段分别用蓝色、绿色和紫色画了出来。
图2画有三条不同颜色的线段的画布
图2中的线段由清单1中的代码来创建，蓝色的线段有着圆弧形的端点，该线段是由首个context.beginPath（）这一开始新路径的建立的方法来创建的，其后紧跟着：
1.context.moveTo（50,50），该方法把线路的起点置于（x=50,y=50）
2.context.lineTo（300,50），该方法标识线段的终点
3.context.lineWidth=10，该属性是线段的宽度
4.context.strokeStyle="#0000FF"，该属性是线段的颜色
5.context.lineCap="round"，该属性把端点设成是圆弧状的
6.context.stroke（），该方法真正在画布上绘制该线段
所有线段的长度都是50像素，尽管它们看上去不一样长——这是由线段的线帽（linecap）造成的视觉错觉。
可用的线帽有三种：
1.Context.round（blue）
2.Context.square（green）
3.Context.butt（purple）——默认值
对接（butt）线帽是默认值，当使用圆形（round）或是方形（square）的线帽风格时，线段的长度会增加，加上一段相当于线段宽度的长度。
例如，一个长度为200像素，宽度为10像素，有着圆形或是方形线帽风格的线段，其最终的线段长度是210像素，因为每个线帽都都往线段的每一端加上了5个像素的长度。
而一个长度为200像素，宽度为20像素，有着圆形或是方形的线帽风格的线段的最终长度是220像素，因为每个线帽都往线段每一端加上了10像素的长度。
通过执行和修改代码1中的代码来更好地理解线段的绘制方式。
代码1：
DOCTYPEHTML>
xuliang1
2.4.2绘制矩形
有三个方法可用来在画布上给出一个矩形的区域：
1.fillRect（x,y,width,height），该方法绘制一个有填充的矩形
2.strokeRect（x,y,width,height），该方法绘制一个矩形的外边框
3.clearRect（x,y,width,height），该方法清空指定的区域，使之变得完全透明
对于这三个方法中的每个来说，x和y表示的都是画布上相对于矩形（x=0,y=0）的左上角的位置，width和height分别是矩形的宽度和高度。
图3显示了由代码2中的代码创建的三个矩形。
图3画有矩形的画布
fillRect（）方法创建了一个以缺省的黑色为填充色的矩形；clearRect（）方法在第一个矩形的中心部分清除出一个矩形区域，该区域位于由fillRect（）方法产生的矩形的中央位置；strokeRect创建了一个只有可见的黑色边框的矩形。
代码2：
DOCTYPEHTML>
xuliang2
functiondrawShape（）{
varcanvas=document.getElementById（'xuliangCanvas'）;
varcontext=canvas.getContext（'2d'）;
context.fillRect（25,25,50,50）;
context.clearRect（35,35,30,30）;
context.strokeRect（100,100,50,50）;
}