HTML5 Web基础及其开发 6_第1页
已阅读1页，还剩31页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

第6章Canvas画布响应式Web开发（HTML5+CSS3+Bootstrap）高等教育出版社重难点重点:（1）canvas基本概念与创建。（2）掌握绘制基本图形的方法。（3）掌握处理Canvas中的事件，如鼠标事件、键盘事件等。难点:（1）绘制复杂图形图像。（2）上下文状态管理。目录01认识Javascript03项目实操02认识Canvas01认识JavascriptJavaScript是一种轻量级、解释型的脚本语言，主要用于网页交互开发。它支持事件驱动、函数式编程，能操作DOM、处理异步任务，并随着ES6+标准引入了类、模块等现代特性，现已成为全栈开发的核心技术之一。动态性JavaScript采用事件驱动方式，当HTML页面控件的相关事件被触发时，将动态调用执行事件回调函数，以实现一些与服务器端没有任何联系的前端效果。松散性JavaScript语言核心与C,C++,Java相似，比如条件判断、循环、运算符等，但作为解释型语言，即弱类型语言，它的变量是松散型变量。基于对象JavaScript中的对象（Object）,并非像面向对象语言（如Java）中的对象那样由实例化而来，而只是一些映射对的集合，类似于Map,即把属性名称为任意的属性值，属于引用类型。1.1Javascript特点1.2Javascript引入方式（1）在<head>中的JavaScript函数创建script元素，设置type的属性为text/javascript，表示代码使用的脚本语言内容类型，将JavaScript代码置于<script>标签内，当HTML5页面完全加载完全后，这些代码将被执行。通常script元素会作为head元素最后一个子元素。（2）<body>中的JavaScript函数（3）外部的JavaScript函数也可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。外部JavaScript文件的文件扩展名是.js.1.3Javascript数据类型ECMAScript提供数据类型分为：Undefined、Null、Boolean、Number和String以及一个复杂的数据类型Object（1）JavaScript中的UndefinedUndefined类型只有一个值，即特殊值Undefined。在使用var声明变量，但没有对其初始化，该变量将会被隐式地赋值为Undefined,建议声明变量的同时赋初始值。（2）JavaScriptNull类型Null类型只有一个值，即特殊值null，表示一个空对象的引用。（3）JavaScript布尔Boolean布尔（逻辑）只能有两个值：true或false。varx=true;vary=false;1.3Javascript数据类型（4）JavaScript数字NumberNumber类型包含2种数值，整型和浮点型，整型可以分为八、十和十六进制，例如:varnum=100;//十进制整数varnum=070;//八进制整数varnum=0xA;//十六进制（5）JavaScript字符串String字符串String，用双引号或单引号引起，由零或多个16位Unicode字符组成的字符序列varfruitname="apple";varfruitname='banana';1.3Javascript数据类型（6）JavaScript数组varfruits=newArray();cars[0]="Apple";cars[1]="orange";cars[2]="banana";数组下标是基于零的，所以第一个项目是[0]，第二个是[1]，以此类推。1.4Javascript变量变量是用于存储信息的"容器"。与代数一样，JavaScript变量可用于存放值（比如x=5）和表达式（比如z=x+y）。（1）变量命名规则变量可以使用短名称（比如x和y），也可以使用描述性更好的名称（比如age,sum）；变量必须以字母开头；变量也能以$和_符号开头（不过我们不推荐这么做）；变量名称对大小写敏感（y和Y是不同的变量）。（2）声明变量在JavaScript中创建变量通常称为"声明"变量。在2015年以前，我们使用var关键字来声明JavaScript变量。在2015后的JavaScript版本(ES6)允许我们使用const关键字来定义一个常量，使用let关键字定义的限定范围内作用域的变量。1.4Javascript变量（3）变量赋值我们使用var关键词来声明变量：varfruitname;变量声明之后，该变量是空的（它没有值）。如需向变量赋值，需使用等号：fruitname="apple";可以在声明变量时对其赋值：varfruitname="banana";可以在一条语句中声明很多变量。该语句以var开头，并使用逗号分隔变量即可：varlastname="Doe",age=30;声明也可横跨多行：1.5Javascript函数函数是JavaScript的一个核心概念，函数是定义一次却可以任意多次调或被事件驱动执行的一段JavaScript代码，允许带参或者不带参，也允许或返回值由事件驱动的或者当它被调用时执行的可重复使用的代码块。为完成某一功能的程序指令(语句)的集合，称为函数。在JavaScript中，函数是头等(first-class)对象，每个函数其实都是一个Function对象，因为它们可以像任何其他对象一样具有属性和方法。它们与其他对象的区别在于函数可以被调用。1.5Javascript函数如果一个函数中没有使用return语句，则它默认返回undefined。要想返回一个特定的值，则函数必须使用return语句来指定一个要返回的值。(使用new关键字调用一个构造函数除外)。调用函数时，传递给函数的值被称为函数的实参，对应位置的函数参数名叫作形参。值传递实参是一个包含原始值(数字，字符串，布尔值)的变量，则就算函数在内部改变了对应形参的值，返回后，该实参变量的值也不会改变。如果实参是一个对象引用，则对应形参会和该实参指向同一个对象。假如函数在内部改变了对应形参的值，返回后，实参指向的对象的值也会改变。1.5Javascript函数（1）JavaScript函数语法函数就是包裹在花括号中的代码块，前面使用了关键词function：functionfunctionname(){//执行代码}当调用该函数时，会执行函数内的代码。1.5Javascript函数（2）调用带参数的函数在调用函数时，可以向其传递值，这些值被称为参数。这些参数可以在函数中使用。可以发送任意多的参数，由逗号(,)分隔：myFunction(argument1,argument2)当声明函数时，请把参数作为变量来声明：functionmyFunction(var1,var2){代码}变量和参数必须以一致的顺序出现。第一个变量就是第一个被传递的参数的给定的值，以此类推。1.5Javascript函数（3）带有返回值的函数有时，我们会希望函数将值返回调用它的地方。通过使用return语句就可以实现。在使用return语句时，函数会停止执行，并返回指定的值。语法：functionmyFunction(){varx=5;returnx;}1.6Javascript事件处理HTML事件是发生在HTML元素上的事情。HTML事件可以是浏览器行为，也可以是用户行为。例如：HTML页面完成加载、HTMLinput字段改变时、HTML按钮被点击等等。通常，当事件发生时，可以做些事情。在事件触发时JavaScript可以执行一些代码。HTML元素中可以添加事件属性，使用JavaScript代码来添加HTML元素。在以下实例中，按钮元素中添加了onclick属性(并加上代码):<buttononclick="getElementById('demo').innerHTML=Date()">现在的时间是</button>以上代码中，JavaScript代码将修改id="demo"元素的内容。1.6Javascript事件处理事件描述onchangeHTML元素改变onclick用户点击HTML元素onmouseover鼠标指针移动到指定的元素上时发生onmouseout用户从一个HTML元素上移开鼠标时发生onkeydown用户按下键盘按键onload浏览器已完成页面的加载02认识Canvas<canvas>是HTML5新增的，一个可以使用脚本(通常为JavaScript)在其中绘制图像的HTML元素。它可以用来制作照片集或者制作简单(也不是那么简单)的动画，甚至可以进行实时视频处理和渲染。Canvas是由HTML代码配合高度和宽度属性而定义出的可绘制区域。JavaScript代码可以访问该区域，类似于其他通用的二维API，通过一套完整的绘图函数来动态生成图形。2.1认识CanvasCanvasAPI（画布）是在HTML5中新增的标签用于在网页实时生成图像，并且可以操作图像内容，基本上它是一个可以用JavaScript操作的位图（bitmap）。Canvas是HTML5的新增标签。Canvas元素以标签形式应用到HTML5页面中。2.1认识Canvas页面设置canvas的语法格式为：<canvasid="canvas"width="400"height="400">

你的浏览器不支持canvas，请升级你的浏览器。</canvas>canvas的尺寸由width和height决定，如果不设置widht、height属性，则默认width为300px、height为150px。Canvas标签本身不能绘制图形，需要与JavaScript脚本相结合，才能在网页中绘制图形。2.2绘图基本步骤Canvas提供了一套绘图API,使用<canvas>标签绘图的基本步骤是先要获取canvas元素的对象，再获取绘图上下文，然后就可以使用绘图API的丰富功能。先看canvas相关的基本参数。1）获取canvas对象首先需要从canvas获取对象，使用Document对象的getElementById()获取，如获取页面中的id为canvas的canvas对象。varcanvas=document.getElementById("canvas");2.2绘图基本步骤（2）创建二维的绘图上下文对象Canvas对象获取不同类型API,需要使用getContext()绘制上下文对象。varcontext=canvas.getContext("2d");（3）在canvas绘制填充矩形设置矩形的填充颜色和矩形大小。context.fillStyle="blue";context.fillRect(20,20,170,170);2.3绘制基本图形本节使用<canvas>标签与JavaScript脚本结合方法，绘制一些常见的基本图形方法描述fill()通过填充路径的内容区域生成实心的图形stroke()通过线条来绘制图形轮廓beginPath()新建一条路径，路径一旦创建成功，图形绘制命令被指向到路径上生成路径moveTo(x,y)把画笔移动到指定的坐标(x,y)，相当于设置路径的起始点坐标。closePath()闭合路径之后，图形绘制命令又重新指向到上下文中lineTo(x,y)添加一个新点(x,y),然后创建从该点到最后指定点的线条路径2.3绘制基本图形（1）绘制路径基本步骤图形的基本元素是路径。路径是通过不同颜色和宽度的线段或曲线相连形成的不同形状的点的集合。一个路径，甚至一个子路径，都是闭合的。使用路径绘制图形需要一些步骤：创建路径起始点调用绘制方法去绘制出路径把路径封闭通过描边或填充路径区域来渲染图形2.3绘制基本图形（2）绘制直线使用<canvas>标签绘制直线，需要将<canvas>标签与Javascript中的moveTo和lineTo方法相结合。获取canvas对象，首先需要从canvas获取对象，使用Document对象的getElementById()获取，如获取页面中的id为canvas的canvas对象。varcanvas=document.getElementById("canvas");创建二维的绘图上下文对象，Canvas对象获取不同类型API,需要使用getContext()绘制上下文对象。varcontext=canvas.getContext("2d");2.3绘制基本图形（2）绘制直线通过moveTo()

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论