HTML5 学习笔记（三）
1.SVG 动画
SVG 动画可以使用
实例
创建一个矩形，将在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 路径
下面的命令可用于路径数据：
- 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.
HTML5
getContext() 方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性。
你可以通过多种方法使用 Canvas 绘制路径、盒、圆、字符以及添加图像。
<canvas id="myCanvas" width="200" height="100">
canvas>
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 一样：
7.HTML5 新属性
1,placeholder 属性
HTML5 添加了一个名为 placeholder 的新属性。在 和