HTML5 学习笔记（三）

1.SVG 动画

SVG 动画可以使用 <animate> 元素创建。

实例

创建一个矩形，将在3秒内更改其位置，然后重复动画两次：

<svg width="1000" height="250">
<rect width="150" height="150" fill="orange">
  <animate attributeName="x" from="0" to="300"
    dur="3s" fill="freeze" repeatCount="2"/> 
</rect>
</svg>

attributeName：指定哪个属性需要产生动画效果

from：指定属性的起始值

to：指定属性的结束值

dur：指定动画运行的时间（持续时间）

fill=“freeze|remove”：指定动画播放完毕后是停留在播放的终点还是回到起始位置

2.SVG 路径

<path> 元素用于定义一个路径。

下面的命令可用于路径数据：

• M = moveto
• L = lineto
• H = horizontal lineto
• V = vertical lineto
• C = curveto
• S = smooth curveto
• Q = quadratic Bézier curve
• T = smooth quadratic Bézier curveto
• A = elliptical Arc
• Z = closepath

注意：以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位。

实例

<svg width="500" height="500">
  <path d="M150 0 L75 200 L225 200 Z" />
</svg>

上面的例子定义了一条路径，它开始于位置150 0，到达位置75 200，然后从那里开始到225 200，最后在150 0关闭路径。

repeatCount：指定动画的重复播放次数

在上面的例子中，矩形在3秒内将其x属性从0更改为300。

要无限重复动画，请使用值 “indefinite” 作为 repeatCount 属性。

3.<canvas> 元素

HTML5 <canvas> 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成。

<canvas> 标签只是图形容器，您必须使用脚本来绘制图形。

getContext() 方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性。

你可以通过多种方法使用 Canvas 绘制路径、盒、圆、字符以及添加图像。

<canvas> 元素定义如下：

<canvas id="myCanvas" width="200" height="100">
</canvas>

<canvas> 标签通常需要指定一个id属性 (脚本中经常引用)，width 和 height 属性定义的画布的大小。

Canvas 坐标

canvas 是一个二维网格。

canvas 的左上角坐标为 (0,0)。

X 坐标向右增加。

Y 坐标向着画布底部增加。

4.Canvas 的使用

1，Canvas - 路径

在Canvas上画线，我们将使用以下两种方法：

• moveTo(x,y) 定义线条开始坐标
• lineTo(x,y) 定义线条结束坐标

在canvas中绘制圆形, 我们将使用以下方法:

• arc(x,y,r,start,stop)

2，Canvas - 文本

使用 canvas 绘制文本，重要的属性和方法如下：

• font - 定义字体
• fillText(text,x,y) - 在 canvas 上绘制实心的文本
• strokeText(text,x,y) - 在 canvas 上绘制空心的文本

3，Canvas - 渐变

渐变可以填充在矩形, 圆形, 线条, 文本等等, 各种形状可以自己定义不同的颜色。

以下有两种不同的方式来设置Canvas渐变：

• createLinearGradient(x,y,x1,y1) - 创建线条渐变
• createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向/圆渐变

当我们使用渐变对象，必须使用两种或两种以上的停止颜色。

addColorStop()方法指定颜色停止，参数使用坐标来描述，可以是0至1.

使用渐变，设置fillStyle或strokeStyle的值为 渐变，然后绘制形状，如矩形，文本，或一条线。

4，Canvas - 图像

把一幅图像放置到画布上, 使用以下方法:

• drawImage(image,x,y)

5.SVG 与 Canvas 的区别

SVG 与 Canvas 的区别:

SVG

SVG 是一种使用 XML 描述 2D 图形的语言。

SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。

在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。

特点：

• 不依赖分辨率
• 支持事件处理器
• 最适合带有大型渲染区域的应用程序（比如谷歌地图）
• 复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
• 不适合游戏应用

Canvas

Canvas 通过 JavaScript 来绘制 2D 图形。

Canvas 是逐像素进行渲染的。

在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。

特点：

• 依赖分辨率
• 不支持事件处理器
• 弱的文本渲染能力
• 能够以 .png 或 .jpg 格式保存结果图像
• 最适合图像密集型的游戏，其中的许多对象会被频繁重绘

6.HTML5 表单

HTML5 为Web表单创建带来了很多新特性，添加了多个新属性和输入类型，这些新特性提供了更好的输入控制和验证。

HTML5 中的表单创建方式与 HTML 一样：

<form>
   <input type="text" name="username" />
</form>

7.HTML5 新属性

1,placeholder 属性

HTML5 添加了一个名为 placeholder 的新属性。在 <input> 和 <textarea> 元素上，此属性提供一种提示，描述输入域所期待的值。

简短的提示在用户输入值前会显示在输入域上。

实例

<form>
   <input type="text" name="fname" placeholder="First name" />
   <input type="text" name="lname" placeholder="Last name" />
   <input type="submit" value="提交" />
</form>

运行显示结果如下图：

2,autofocus 属性

当表autofocus 属性规定在页面加载时，域自动地获得焦点。

实例

让 "First name" input 输入域在页面载入时自动聚焦：

<form>
  First name: <input type="text" name="fname" autofocus><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit">
</form>

运行显示结果如下图：

8.带必填字段的表单

required 属性规定必须在提交之前填写输入域（不能为空）。

实例

不能为空的 input 字段：

<form autocomplete="off">
  Username: <input type="text" name="username" required />
  <input type="submit" />
</form>

运行显示结果如下图：

autocomplete 属性规定 form 或 input 域应该拥有自动完成功能。

当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项。

9.创建搜索框

新的搜索输入类型可用于创建搜索框：

<input type="search" name="searchitem" />

运行显示结果如下图：

10.搜索选项列表

<datalist> 元素规定输入域的选项列表。

<datalist> 属性规定 form 或 input 域应该拥有自动完成功能。当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项。

实例：

<input> 元素使用 <datalist> 预定义值:

<input list="browsers" />
<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

运行显示结果如下图：

11.创建更多的输入类型

HTML5 拥有多个新的输入类型，包括 email，tel，url，date，time 等。

下面是一个例子：

<form>
  <input type="email" name="email" placeholder="example@example.com" />
  <br />
  <input type="tel" name="usrtel" placeholder="666.666.6666" />
  <br />
  <input type="url" name="homepage" placeholder="example.com" />
</form>

运行显示结果如下图：