html5 新元素和Canvas

（1） HTML5 新元素

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

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

<canvas> 新元素

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

HTML5 Canvas

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

什么是 Canvas?

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

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

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

一、创建一个画布（Canvas）

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

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

简单实例如下:

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

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

</canvas>

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

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

使用 JavaScript 来绘制图像

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

#canvas1{

border: 1px solid #000;

}

</style>

首先，找到 <canvas> 元素:

var c = document.getElementById('canvas1');

然后，创建 context 对象：

getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法

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

设置fillStyle属性可以是CSS颜色，渐变，或图案。fillStyle默认设置是#000000（黑色）。

ctx.fillStyle="#ff0000";

fillRect( x,y,width,height ) 方法定义了矩形当前的填充方式

ctx.fillRect(0,0,150,75);

</script>

讲解：

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().

<body>

<h3>创建一个画布</h3>

var c = document.getElementById('canvas1');

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

//绘制一个圆形

ctx.beginPath();

ctx.arc(95, 50, 40, 1.0*Math.PI, 1.5 * Math.PI);

ctx.stroke();

</script>

</body>

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);

<!DOCTYPE html>

<html>

<head>

<title>Canvas</title>

#canvas3,

#canvas4 {

border: 1px solid #000;

}

</style>

</head>

<body>

<h3>创建一个画布</h3>

//线性渐变

var cline = document.getElementById('canvas3');

var ctx2 = cline.getContext("2d");

var grd = ctx2.createLinearGradient(0, 0, 200, 0);

grd.addColorStop(0, "red");

grd.addColorStop(1, "white");

ctx2.fillStyle=grd;

ctx2.fillRect(10,10,150,80);

//镜像渐变

var cline1 = document.getElementById('canvas4');

var ctx3 = cline1.getContext("2d");

var grd1 = ctx3.createRadialGradient(75,50,5,90,60,100);

grd1.addColorStop(0, "red");

grd1.addColorStop(1, "white");

ctx3.fillStyle=grd1;

ctx3.fillRect(10,10,150,80);

</script>

</body>

</html>

新多媒体元素

标签	描述
<audio>	定义音频内容
<video>	定义视频（video 或者 movie）
<source>	定义多媒体资源 <video> 和 <audio>
<embed>	定义嵌入的内容，比如插件。
<track>	为诸如 <video> 和 <audio> 元素之类的媒介规定外部文本轨道。

新表单元素

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

新的语义和结构元素

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

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

html5 新元素和Canvas

猜你喜欢