《嵌入式软件编程》课程报告模板.docx

1、嵌入式软件编程课程报告模板天津电子信息职业技术学院嵌入式软件编程课程报告论文题目：此处填写论文题目姓名：姓名（班内顺序号）系别：网络技术系专业：计算机控制技术或者物联网应用技术班级：计控S11-1或者物联11-1指导教师：白志杰摘要HTML5将成为HTML、XHTML以 HTML DOM的新标准。HTML 的上一个版本诞生于1999年。 自从那以后，Web 世界已经经历了巨变。HTML 5有两大特点：首先，强化了Web网页的表现性能；其次，追加了本地数据库等Web应用的功能。广义论及HTML5时，实际指的是包括HTML、CSS和JavaScript在内的一套技术组合。它希望能够减少浏览器对于需

2、要插件的丰富性网络应用服务（plug-in-based rich internet application，RIA)，如Adobe Flash、Microsoft Silverlight，与Oracle JavaFX的需求，并且提供更多能有效增强网络应用的标准集。HTML 5特性：Canvas、WebGL、SVG、Video、Form、选择器、本地储存、本地数据库、离线应用、后台异步化、双向信息传输、桌面提醒、拖拽、地理位置定位。关键字 HTML 5 Canvas目录一、概述 1二、HTML5基础之Canvas 22.1 什么是Canvas 22.2 Canvas的坐标 22.3 开始第一步

3、32.4 绘图工具、效果和转换 42.4.1 绘制线段 42.4.2 绘制矩形 72.4.3 绘制圆弧、曲线、圆和半圆 92.4.4 二次曲线 92.4.5 贝塞尔曲线 92.4.6转换：平移、缩放和旋转 132.5 渐变 15三、结论 19四、参考文献 19一、概述HTML标准自1999年12月发布的 HTML 4.01 后，后继的 HTML 5 和其它标准被束之高阁，为了推动web标准化运动的发展，一些公司联合起来，成立了一个叫做 Web Hypertext Application Technology Working Group （Web 超文本应用技术工作组 - WHATWG） 的组织

4、。WHATWG 致力于 web 表单和应用程序，而 W3C（World Wide Web Consortium，万维网联盟） 专注于 XHTML 2.0。在 2006 年，双方决定进行合作，来创建一个新版本的 HTML。HTML5草案的前身名为 Web Applications 1.0，于2004年被 WHATWG 提出，於2007年被 W3C 接纳，并成立了新的 HTML 工作团队。HTML 5 的第一份正式草案已于2008年1月22日公布。HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。HTML 5的特性：A. 语义特性（Class：Semantic）H

5、TML5赋予网页更好的意义和结构。更加丰富的标签将随着对RDFa的，微数据与微格式等方面的支持，构建对程序、对用户都更有价值的数据驱动的Web。B. 本地存储特性（Class: OFFLINE & STORAGE）基于HTML5开发的网页APP拥有更短的启动时间，更快的联网速度，这些全得益于HTML5 APP Cache，以及本地存储功能。Indexed DB（html5本地存储最重要的技术之一） 和API说明文档。C. 设备兼容特性 (Class: DEVICE ACCESS)从Geolocation 功能的API文档公开以来，HTML5为网页应用开发者们提供了更多功能上的优化选择，带来了更

6、多体验功能的优势。HTML5提供了前所未有的数据与应用接入开放接口。使外部应用可以直接与浏览器内部的数据直接相连，例如视频影音可直接与microphones及摄像头相联D. 连接特性（Class: CONNECTIVITY）更有效的连接工作效率，使得基于页面的实时聊天，更快速的网页游戏体验，更优化的在线交流得到了实现。HTML5拥有更有效的服务器推送技术，Server-Sent Event和WebSockets就是其中的两个特性，这两个特性能够帮助我们实现服务器将数据推送到客户端的功能。E. 网页多媒体特性(Class: MULTIMEDIA)支持网页端的Audio、Video等多媒体功能，

7、与网站自带的APPS，摄像头，影音功能相得益彰。F. 三维、图形及特效特性（Class: 3D, Graphics & Effects）基于SVG、Canvas、WebGL及CSS3的3D功能，用户会惊叹于在浏览器中，所呈现的惊人视觉效果。G. 性能与集成特性（Class: Performance & Integration）没有用户会永远等待你的LoadingHML5会通过XMLHttpRequest2等技术，帮助您的Web应用和网站在多样化的环境中更快速的工作。H. CSS3特性(Class: CSS3)在不牺牲性能和语义结构的前提下，CSS3中提供了更多的风格和更强的效果。此外，较之以前

8、的Web排版，Web的开放字体格式（WOFF）也提供了更高的灵活性和控制性。二、HTML5基础之Canvas2.1 什么是CanvasHTML5 Canvas（画布）是一个非常有用的绘图和动画元素，Canvas使用JavaScript来直接在页面上绘制图形。这是一个由你来定义和控制的长方形区域，该区域允许动态、可脚本渲染的2D图形和位图图像。在制作用来增强UI、示意图、相册、图表、图形、动画和嵌入式绘图应用的那些非常棒的视觉材料方面，HTML5堪称完美。Canvas元素有一些用来绘制路径、矩形、圆形和字符的方法。2.2 Canvas的坐标在画布上绘图的一个先决条件是要熟悉网格或是坐标空间，宽度

9、和高度的空间区域测量是以像素为单位给出的。画布是基于x和y坐标的使用来构建的，画布的x=0, y=0坐标位于左上角。画布的矩形区域的默认属性是300像素的宽度和150像素的高度，但你可以通过指定宽度和高度来确定画布元素的确切大小。图1中的示意图说明了x和y坐标的实现方式。图1 Canvas的坐标图1给出了一个100像素X100像素的画布区1. 左上角是x=0，y=0。2. x的值水平增加，y的值垂直增加。3. 右下角是x=100，y=100。4. 中间的点是x=50，y=50。2.3 开始第一步要在画布上放置任何东西的话，首先必须在HTML文件中定义画布。必须创建访问标签的JavaScript

10、代码，并通过与HTML5 Canvas API通信来绘制图像。标签的基本结构如下：canvas元素自身有两个属性：width和height，除此之外，canvas还拥有所有主要的HTML5属性，比如说class、id和name等。id属性被用在上面所示的代码中，JavaScript使用这里创建的canvas的id来表示要在上面绘画的画布。JavaScript使用document.getElementById()方法来确定正确的画布，如下面代码所示：var canvas = document.getElementById(xuliangCanvas);每个画布都必须要有一个context（上下文

11、）的定义，如下面代码所示。就目前的情况来说，官方规范只承认一个2D环境：var context = canvas.getContext(2d);在标识画布并指明了它的上下文之后，就做好了开始绘画的准备了。2.4 绘图工具、效果和转换在HTML5 Canvas的这一讨论过程中，对各种绘图工具、效果和转换都查看一番。绘图工具包括：1. 线条2. 矩形3. 圆弧4. 贝塞尔曲线和二次曲线5. 圆和半圆会用到的Canvas效果包括：1. 填充和描边2. 线性和径向的渐变要讨论的转换包括：1. 缩放2. 旋转3. 平移2.4.1 绘制线段要在画布上绘制线段的话，可以使用moveTo()、lineTo()

12、和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和strok

13、eStyle来改变线段的外观，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. con

14、text.strokeStyle = #0000FF，该属性是线段的颜色 5. context.lineCap = round，该属性把端点设成是圆弧状的6. context.stroke()，该方法真正在画布上绘制该线段所有线段的长度都是50像素，尽管它们看上去不一样长这是由线段的线帽（line cap）造成的视觉错觉。可用的线帽有三种：1. Context.round (blue)2. Context.square (green)3. Context.butt (purple)默认值对接（butt）线帽是默认值，当使用圆形（round）或是方形（square）的线帽风格时，线段的长度会增加

15、，加上一段相当于线段宽度的长度。例如，一个长度为200像素，宽度为10像素，有着圆形或是方形线帽风格的线段，其最终的线段长度是210像素，因为每个线帽都都往线段的每一端加上了5个像素的长度。而一个长度为200像素，宽度为20像素，有着圆形或是方形的线帽风格的线段的最终长度是220像素，因为每个线帽都往线段每一端加上了10像素的长度。通过执行和修改代码1中的代码来更好地理解线段的绘制方式。代码1： xuliang1 body margin: 0px; padding: 0px; #myCanvas border: 1px solid #9C9898; window.onload = functi

16、on() var canvas = document.getElementById(xuliangCanvas); var context = 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.be

17、ginPath(); 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;

18、 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中

19、的代码创建的三个矩形。图3 画有矩形的画布fillRect()方法创建了一个以缺省的黑色为填充色的矩形；clearRect()方法在第一个矩形的中心部分清除出一个矩形区域，该区域位于由fillRect()方法产生的矩形的中央位置；strokeRect创建了一个只有可见的黑色边框的矩形。代码2：xuliang2 body margin: 0px; padding: 0px; #myCanvas border: 1px solid #000000; background-color: #ffff00; function drawShape() var canvas = document.getEl

20、ementById(xuliangCanvas); var context = canvas.getContext(2d); context.fillRect(25,25,50,50); context.clearRect(35,35,30,30); context.strokeRect(100,100,50,50); 2.4.3 绘制圆弧、曲线、圆和半圆圆和半圆都是使用arc()方法来绘制，arc()方法用到了六个参数：context.arc(centerX, centerY, radius, startingAngle, endingAngle, antiClockwise);center

21、X和centerY参数是圆的中心坐标，radius就是数学上的半径：从圆心到圆周线的一条直线。弧形是作为所定义的圆的一部分来创建的，startAngle和endAngle参数分别是圆弧的起点和终点，以弧度为单位。anticlockwise参数是一个布尔（Boolean）值，当其值为true时，弧形按逆时针方向来绘制，当其值为false时，弧形按顺时针方向来绘制。要使用arc()方法来绘制圆的话，把起始角度定义成0，把结束角度定义成2*PI，如下所示：context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);要使用arc()方法来绘

22、制半圆的话，把结束角度定义成startingAngle + PI，如下所示：context.arc(centerX, centerY, radius, startingAngle, startingAngle + Math.PI, false);2.4.4 二次曲线quadraticCurveTo()方法被用来创建一条二次曲线，如下所示。二次曲线通过上下文中的点、一个控制点以及一个结束点来定义。控制点确定了线的曲度。context.moveTo(x, y);context.quadraticCurveTo(controlX, controlY, endX, endY);2.4.5 贝塞尔曲线和

23、二次曲线一样，贝塞尔曲线也有一个起点和一个终点，但和二次曲线不同的是，它有两个控制点：context.moveTo(x, y);context.bezierCurveTo(controlX1, controlY1, controlX2, controlY2, endX, endY);可以使用bezierCurveTo()方法来创建贝塞尔曲线，因为贝塞尔曲线是由两个控制点而不仅是由一个控制点来定义的，所有可以创造出更加复杂的曲度来。图4的显示从左到右为一条圆弧、一条二次曲线、一条贝塞尔曲线、一个半圆和一个圆。图4的内容是用代码3中的代码来创建的。图4 圆弧、曲线和圆代码3： xuliang3 b

24、ody margin: 0px; padding: 0px; #myCanvas border: 1px solid #9C9898; function drawArc() var canvas = document.getElementById(xuliangCanvas); var context = canvas.getContext(2d); var centerX = 100; var centerY = 160; var radius = 75; var startingAngle = 1.1 * Math.PI; var endingAngle = 1.9 * Math.PI;

25、var counterclockwise = false; context.arc(centerX, centerY, radius, startingAngle, endingAngle, counterclockwise); context.lineWidth = 10; context.strokeStyle = black; context.stroke();function drawQuadratic() var canvas = document.getElementById(xuliangCanvas); var context = canvas.getContext(2d);

26、context.moveTo(200, 150); var controlX = 288; var controlY = 0; var endX = 388; var endY = 150; context.quadraticCurveTo(controlX, controlY, endX, endY); context.lineWidth = 10; context.strokeStyle = black; context.stroke();function drawBezier() var canvas = document.getElementById(xuliangCanvas); v

27、ar context = canvas.getContext(2d); context.moveTo(350, 350); var controlX1 = 440; var controlY1 = 10; var controlX2 = 550; var controlY2 = 10; var endX = 500; var endY = 150; context.bezierCurveTo(controlX1, controlY1, controlX2, controlY2, endX, endY); context.lineWidth = 10; context.strokeStyle =

28、 black; context.stroke();function drawCircle() var canvas = document.getElementById(xuliangCanvas); var context = canvas.getContext(2d); var centerX = 450; var centerY = 375; var radius = 70; context.beginPath(); context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false); context.fillStyle = #800000; context.fill(); context.lineWidth = 5; context.strokeStyle = black; context.stroke();function drawSemicircle() var canvas = document.getElementById(xuliangCanvas); var context = canvas.getContext(2d); var centerX = 100; var centerY = 375; var radi