《嵌入式软件编程》课程报告模板.docx
《《嵌入式软件编程》课程报告模板.docx》由会员分享,可在线阅读,更多相关《《嵌入式软件编程》课程报告模板.docx(26页珍藏版)》请在冰豆网上搜索。
![《嵌入式软件编程》课程报告模板.docx](https://file1.bdocx.com/fileroot1/2023-6/15/a816c5eb-c3d0-4e93-8e9c-555311a1a8ce/a816c5eb-c3d0-4e93-8e9c-555311a1a8ce1.gif)
《嵌入式软件编程》课程报告模板
天津电子信息职业技术学院
《嵌入式软件编程》课程报告
论文题目
:
此处填写论文题目
姓名
:
姓名(班内顺序号)
系别
:
网络技术系
专业
:
计算机控制技术或者物联网应用技术
班级
:
计控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>
xuliang1body{
margin:
0px;
padding:
0px;
}
#myCanvas{
border:
1pxsolid#9C9898;
}
window.onload=function(){
varcanvas=document.getElementById("xuliangCanvas");
varcontext=canvas.getContext("2d");
//有着圆形端点的蓝色线段
context.beginPath();
context.moveTo(50,50);
context.lineTo(300,50);
context.lineWidth=10;
context.strokeStyle="#0000FF";
context.lineCap="round";
context.stroke();
//有着方形端点的绿色线段
context.beginPath();
context.moveTo(50,100);
context.lineTo(300,100);
context.lineWidth=20;
context.strokeStyle="#00FF00";
context.lineCap="square";
context.stroke();
//有着对接端点的紫色线段
context.beginPath();
context.moveTo(50,150);
context.lineTo(300,150);
context.lineWidth=30;
context.strokeStyle="#FF00FF";
context.lineCap="butt";
context.stroke();
};
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>
xuliang2body{
margin:
0px;
padding:
0px;
}
#myCanvas{
border:
1pxsolid#000000;
background-color:
#ffff00;
}
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);
}