[HTML5笔记.docxVIP

第一节：HTML5简介HTML5是当前一种交互影响的HTML，即超文本标记语言。HTML第一次标准化是在1993年，然后一时间风靡了全球。HTML是一种使用尖括号和各种标签结合的网页文本格式的具体呈现。HTML5的canvas（画布）是一种以快速方式并利用javascript来操作屏幕中部分区域的位图。快速方式指的是canvas的在屏幕中以像素形式呈现。HTML5的canvas完全再现了屏幕中的位图重画功能依靠调用javascript中canvas API框架。作为一个HTML5前端工程师，你需要做的就是在屏幕上保证你的屏幕中的位图（像素）能够在每一个框架中被正确表现出来。由于HTML5 canvas的保留模式使得HTML5 canvas与Flash、Silverlight、或者SVG截然不同，在这种模式下，呈现的对象（object）列表通过图像的方式表达，并且这些对象通过代码操作显示在屏幕坐标中（X,Y坐标，alpha通道都可设置在每一个对象中），尽管这些让程序员们多了一些了低级的操作，但让他们少了不控制屏幕的位图渲染的繁琐。基本的HTML5 canvas的API可在一个二维的情况下，允许程序员来绘制各种形状，呈现文本，并直接显示图像到一个经定义区域的浏览器窗口。在你画布和图像的时候，你可以运用色彩；旋转；Alpha透明像素的操作；各种类型的线，曲线，盒，填补以增加形状，文本。HTML5 canvas的二维环境是一个利用API渲染的图形显示位图区，但是这只是其中的一小点创建发展背景。此外HTML5还能以跨浏览器的JavaScript控制键盘鼠标输入，定时器的时间间隔，事件，对象，类，声音，数学函数等等，你可以利用HTML5画布来创造惊人的动画，应用，和游戏。支持HTML5 canvas的浏览器越来越多，但Internet Explorer 8之前的例外，在大多数现代浏览器某种程度上对HTML5画布，支持最好的似乎是谷歌浏览器，紧随其后的是Safari，Firefox，Opera。基本的HTML页面，先谈谈HTML5标准。尽管HTML是用于万维网上构建页面的标准语言。但我们不会花太多时间在HTML，而深入在于它的标签canvas上，一个基本的HTML页面分成几部分，通常为头（head） 、身体（body）。新的HTML5规范增加了一些新的章节，如导航（nav），文章（article），页眉（header），和页脚（footer），而我们大多是在body标签中创建HTML页面。第二节：Canvas与Hello World （上）我们的第一个例子是一个HTML5页面使用JavaScript来操纵DOM （Document Object Model）对象canvas标签定位。而在使用DOM对象canvas前，我们需要理解有两个特定的DOM对象：窗口The window object和文档The document object。窗口对象是DOM的最高等级。在我们可以开始使用画布（canvas）加载应用时，我们需要测试这个对象来做确保所有的资源和代码正常支持。而文档对象则在一张HTML页面中包含所有的HTML标签（形如canvas），我们将在javascript中使用这个文档对象来操作canvas。那么正如我们所见，当我们将canvas放进HTML5页面时，它该什么时候被执行呢？以及canvas里的图像声音资源什么时候被加载呢？这是一个问题。那么，为了了解这个东西，我们需要来说一下javascript里的事件监听，比如：键盘、鼠标事件等监听。而其实我们要做的就是监听window对象，当它出现在HTML页面完成时候。方法一：我们使用addEventListener()方法来完成。addEventListener(Event , Event Handle , useCapture)接受三个参数：：Event（事件名：”load…”）这个事件名绑定在一个存在的对象上，比如window：Event Handle (绑定事件的函数：unction)当绑定的事件名发生时调用的函数。：useCapture (事件是否传递给下级：bool值 true或者false)设置子类是否也被绑定Example-2.1：window.addEventListener(“load”,eventFunction,false);function eventFunction(){alert(“Hello World”);}方法二：在原生的事件函数上进行监听Example-2.2：window.onload=function(){alert(“Hello World”);}或者另一种形式：window.onload=eventFunction();function even