HTML5笔记.docx

文档介绍：第一节：HTML5简介
HTML5是当前一种交互影响的HTML，即超文本标记语言。HTML第一次标准化是在1993年，然后一时间风靡了全球。HTML是一种使用尖括号<>和各种标签结合的网页文本格式的具体呈现。
HTML5的canva)
{
alert(“Hello World”);
}
或者另一种形式：
=eventFunction();
function eventFunction()
{
alert(“Hello World”);
}
现在我们已经创建了一个方法来测试是否已加载HTML页面。JavaScript在一个HTML页面里，它可以同时运行与其他JavaScript的应用程序和代码。通常，这不会导致任何问题。但是，你的代码可能有变量或函数与其他HTML页的JavaScript代码冲突。因此这里会分离自己的代码：你可以把你的变量和函数放在另一个函数。举个简单的例子：
Example-：
function canvas ()
{
drawScreen();
...
function drawScreen()
{
...
}
}
好的，说了这么，那么现在我们开始将canvas植入我们HTML页面中，代码如下：
Example-：
<canvas id="canvasOne" width="500" height="300">
Your browser does not support HTML5 Canvas.
</canvas>
顺便解释一下<canvas>标签的这段代码。Id名：canvasOne（将在后面javascript中使用DOM操作），width，height分别对应画布的宽度和高度为500px、330px。在标签中“Your browser does not support HTML5 Canvas.”这段话表示一些浏览器不支持canvas时以文本形式显示的提示信息，你也改成其他内容。因此，问题又来了，我们怎么判断浏览器支持canvas否呢？
延伸：确定浏览器是否支持画布
现在我们已经在HTML页面的进行了画布元素的引用，我们需要测试看它是否包含一个上下文。简单的说，如果上下文不存在的，画布也就没有。可查看画布getContext方法是否存在。
方法一：
Example-：
var theCanvas = ("canvasOne");
if (!theCanvas || !)
{
return;
}
方法二：
Example-：
function boolCanvas ()
{
return !!('testcanvas').getContext;
}
Function doCanvas ()
{
if (!boolCanvas)
{
return;
}
}
方法三：
利用一款js库：，返回true或者false
Example-：
<script src="modernizr-"></script>
function canvasSupport ()
{
return ;
}
通过以上方法检测，如果支持canvas，那么接下来就能得到一个2D模式下的绘图背景
Example-：
var context = ("2d");
第二节：Canvas与Hello World （下）
今天，是该建立一个使用canvas API的代码段了，而且我们的每一步对画布的操作都将依赖于context对象。
这次也只是进文本、图像的简单探究，不会有深入的钻研，本节中心只是对drawScreen（）方法的一个示范。
在屏幕上，我们已经通过canvas定义了一块绘图区域，不是整个浏览器窗口，利用它，我们的应用以及游戏均可在这块区域编写，这操作起来也非常高效。
那么首先，第一件事就是要明确这块绘图区域，下面两行代码画了一块黄色的盒子区域在这屏幕上：
Example-：
<pre class="brush:javascript;gutter:true;toolbar:false">
= "#ffffaa";
(0, 0, 500, 300);
</pre>
PS：fi