html5 新元素和Canvas

（1） HTML5 新元素

自1999年以后HTML 4.01 已经改变了很多,今天，在HTML 4.01中的几个已经被废弃，这些元素在HTML5中已经被删除或重新定义。

为了 更好地处理今天的互联网应用，HTML5添加了很多新元素及功能，比如: 图形的绘制， 多媒体内容，更好的页面结构，更好的形式 处理，和几个api拖放元素，定位，包括网页 应用程序缓存，存储，网络工作者，等。

新元素

标签	描述
	标签定义图形，比如图表和其他图像。该标签基于 JavaScript 的绘图 API

HTML5 Canvas

标签定义图形，比如图表和其他图像，您必须使用脚本来绘制图形。

什么是 Canvas?

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

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

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

一、创建一个画布（Canvas）

一个画布在网页中是一个 矩形框，通过 元素来绘制.

注意: 默认情况下 元素没有边框和内容。

简单实例如下:

id="myCanvas" width="200" height="100"

style="border:1px solid #000000;">

注意: 标签通常需要指定一个id属性 (脚本中经常引用), width 和 height 属性定义的画布的大小.

提示: 你可以在HTML页面中使用多个 元素.

使用 JavaScript 来绘制图像

canvas 元素本身是没有绘图能力的。 所有的绘制工作必须在 JavaScript 内部完成：

讲解：

1）getContext() 方法返回一个用于在画布上绘图的环境。

Canvas.getContext( contextID )

参数  contextID 指定了您想要在画布上绘制的类型。 当前唯一的合法值是 "2d"，它指定了二维绘图，并且导致这个方法返回一个环境对象，该对象导出一个二维绘图 API。

2） fillStyle 属性设置或返回用于填充绘画的颜色、渐变或模式 。

var c=document.getElementById("myCanvas");var ctx=c.getContext("2d"); var my_gradient=ctx.createLinearGradient(0,0,0,170); my_gradient.addColorStop(0,"black");my_gradient.addColorStop(1,"white"); ctx.fillStyle=my_gradient; ctx.fillRect(20,20,150,100);

3）Canvas 坐标

canvas 是一个二维网格。

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

上面的 fillRect 方法拥有参数 (0,0,150,75)。

意思是：在画布上绘制 150x75 的矩形，从左上角开始 (0,0)。

4）Canvas - 路径

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

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

绘制线条我们必须使用到 "ink" 的方法，就像stroke().

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

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

实际上我们在绘制圆形时使用了 "ink" 的方法, 比如 stroke() 或者 fill().

创建一个画布

arc() 方法创建弧/曲线（用于创建圆或部分圆）。

提示 ： 如需通过 arc() 来创建圆，请把起始角设置为 0，结束角设置为 2*Math.PI。

提示：请使用  stroke() 或  fill() 方法在画布上绘制实际的弧。

• 中心：arc(100,75,50,0*Math.PI,1.5*Math.PI)
• 起始角：arc(100,75,50,0,1.5*Math.PI)
• 结束角：arc(100,75,50,0*Math.PI,1.5*Math.PI)

context.arc( x, y, r, sAngle, eAngle, counterclockwise);

参数值

参数	描述
x	圆的中心的 x 坐标。
y	圆的中心的 y 坐标。
r	圆的半径。
sAngle	起始角，以弧度计。（弧的圆形的三点钟位置是 0 度）。
eAngle	结束角，以弧度计。
counterclockwise	可选。规定应该逆时针还是顺时针绘图。False = 顺时针，true = 逆时针。

五、Canvas - 文本

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

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

使用 fillText():

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

ctx.font="30px Arial";

ctx.fillText("Hello World",10,50);

ctx.strokeText("Hello World",10,50);

Canvas -  渐变

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

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

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

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

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

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

使用 createLinearGradient():

addColorStop() 方法规定 gradient 对象中的颜色和位置。

addColorStop() 方法与  createLinearGradient() 或  createRadialGradient() 一起使用。

注释：您可以多次调用 addColorStop() 方法来改变渐变。如果您不对 gradient 对象使用该方法，那么渐变将不可见。为了获得可见的渐变，您需要创建至少一个色标。

createLinearGradient() 方法创建线性的渐变对象。

渐变可用于填充矩形、圆形、线条、文本等等。

提示：请使用该对象作为  strokeStyle 或  fillStyle 属性的值。

提示：请使用  addColorStop() 方法规定不同的颜色，以及在 gradient 对象中的何处定位颜色。

context.createLinearGradient( x0, y0, x1, y1);

参数	描述
x0	渐变开始点的 x 坐标
y0	渐变开始点的 y 坐标
x1	渐变结束点的 x 坐标
y1	渐变结束点的 y 坐标

strokeStyle 属性设置或返回用于笔触的颜色、渐变或模式。

var c=document.getElementById("myCanvas");var ctx=c.getContext("2d");var gradient=ctx.createLinearGradient(0,0,170,0);gradient.addColorStop("0","magenta");gradient.addColorStop("0.5","blue");gradient.addColorStop("1.0","red"); // 用渐变进行填充 ctx.strokeStyle=gradient; ctx.lineWidth=5;ctx.strokeRect(20,20,150,100);

var c=document.getElementById("myCanvas");var ctx=c.getContext("2d");ctx.font="30px Verdana"; // 创建渐变 var gradient=ctx.createLinearGradient(0,0,c.width,0);gradient.addColorStop("0","magenta");gradient.addColorStop("0.5","blue");gradient.addColorStop("1.0","red"); // 用渐变进行填充 ctx.strokeStyle=gradient;ctx.strokeText("Big smile!",10,50);

创建一个画布

新多媒体元素

标签	描述
	定义音频内容
	定义视频（video 或者 movie）
	定义多媒体资源
	定义嵌入的内容，比如插件。
	为诸如

新表单元素

标签	描述
	定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。
	规定用于表单的密钥对生成器字段。
	定义不同类型的输出，比如脚本的输出。

新的语义和结构元素

HTML5提供了新的元素来创建更好的页面结构：

标签	描述
	定义页面独立的内容区域。
	定义页面的侧边栏内容。
	允许您设置一段文本，使其脱离其父元素的文本方向设置。
	定义命令按钮，比如单选按钮、复选框或按钮
	用于描述文档或文档某个部分的细节
	定义对话框，比如提示框
	标签包含 details 元素的标题
	规定独立的流内容（图像、图表、照片、代码等等）。
	定义 元素的标题
	定义 section 或 document 的页脚。
	定义了文档的头部区域
	定义带有记号的文本。
	定义度量衡。仅用于已知最大和最小值的度量。
	定义运行中的进度（进程）。
	定义任何类型的任务的进度。
	定义 ruby 注释（中文注音或字符）。
	定义字符（中文注音或字符）的解释或发音。
	在 ruby 注释中使用，定义不支持 ruby 元素的浏览器所显示的内容。
	定义文档中的节（section、区段）。
	定义日期或时间。
	规定在文本中的何处适合添加换行符。

---