HTML5特性&&canvas

1.HTML5是由W3C（万维网联盟，专注于XHTML 2.0）和WHATWG（专注于web表单和应用程序）共同合作的结果，2014年10月完成标准制定！

主要设计目的：为了在移动设备上支持多媒体。

2.HTML5新特性：（区分HTML）

绘画canvas；
用于媒介回放的video和audio元素；
本地离线缓存localStorage长期缓存数据，浏览器关闭后数据不丢失；sessionStorage的数据浏览器关闭后自动删除；
语义化更好的元素，如：header，nav，article，section，footer；
新的表单控件，如：calendar，date，time，email，url，search；
新技术：webworker，websocket，Geolocation（地理定位）。

3.被HTML5抛弃的“孩子”（元素）：

纯表现的元素：basefont,big,center,font,s,strike,tt,u等（可以用CSS替代）；
对可用性产生负面性影响的元素：frameset，noframes，frame。

4.HTML5支持：IE9以上，现代浏览器支持。

IE8，IE7，IE6可以通过document.createElement()进行创建新标签，然后添加标签默认样式。这样就可以让它们支持HTML5新标签；(以下代码在IETester下的IE 8和IE6测试通过)

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>hello HTML5</title>
 6     <script type="text/javascript">
 7         // 创建了test标签
 8         document.createElement('test');
 9     </script>
10     <style type="text/css">
11         test{
12             display: block;
13             background-color: orange;
14             font-size: 26px;
15             text-align: center;
16         }
17     </style>
18 </head>
19 <body>
20     <test>hello "test" tag</test>
21 </body>
22 </html>

View Code

还有一种方法就是：引用html5shiv文件。（这是一种比较好的解决IE6-8不识别HTML5新元素方法，但是这些引入的新元素不能作为父元素包裹子元素；并且不能运用css样式╮(╯▽╰)╭，“万恶”的IE╮(╯▽╰)╭）

1     <!--[if lt IE 9]>
2     <script type="text/javascript" src="http://cdn.bootcss.com/html5shiv/r29/html5.min.js"></script>
3     <![end if]-->

View Code

5.Canvas元素：

注释/注意的地方都在代码里面了：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>hello canvas</title>
 6     
 7 </head>
 8 <body>
 9     <!-- 注意加载顺序，可简单理解为由上至下加载 -->
10     <!-- 默认情况下，canvas没有边框和内容 -->
11 
12     <!-- 1.绘制矩形 -->
13     <canvas id="canv" width="200px" height="200px" style="border:1px solid;">
14     浏览器不支持canvas标签</canvas>
15     <script type="text/javascript">
16         var canv=document.getElementById('canv');
17         var ctx=canv.getContext('2d');
18         ctx.fillStyle='orange';
19         // 绘制矩形，左上角坐标和右下角坐标
20         ctx.fillRect(0,0,150,150);
21     </script>
22 
23     <!-- 2.绘制直线 -->
24     <canvas id="canv1" width="200px" height="200px" style="border:1px solid;">
25     </canvas>
26     <script type="text/javascript">
27         var ctx1=document.getElementById('canv1').getContext('2d');
28         // 绘制直线，moveTo：定义开始坐标；lineTo：定义结束坐标
29         ctx1.strokeStyle="orange";//定义直线颜色
30         ctx1.lineWidth="10";//定义直线宽度
31         ctx1.moveTo(0,0);
32         ctx1.lineTo(150,150);
33         ctx1.stroke();
34     </script>
35     
36     <!-- 3.绘制圆 -->
37     <canvas id="canv2" width="200px" height="200px" style="border:1px solid;">浏览器不支持canvas标签
38     </canvas>
39     <script type="text/javascript">
40         var ctx2=document.getElementById('canv2').getContext('2d');
41         ctx2.beginPath();
42         // arc(x,y,r,start,stop):圆心x,y坐标;半径;起始角度：与圆心平行的右端为0度；结束角度
43         // Math.PI表示180度，顺时针画圆
44         ctx2.arc(100,100,50,0,2*Math.PI);
45         ctx2.stroke();
46     </script>
47 
48     <!-- 4.绘制文本 -->
49     <canvas id="canv3" width="200px" height="200px" style="border:1px solid">
50     </canvas>
51     
52     <script type="text/javascript">
53         var ctx3=document.getElementById('canv3').getContext('2d');
54         ctx3.font="30px Arial";
55         // fillText绘制的是实心的，strokeText绘制的是空心的
56 
57         // fillText(text,x,y,maxWidth):相对画布x,y输出text;
58         // maxWidth:可选参数，text最大宽度
59         ctx3.fillText("hello canvas",10,50);
60         // ctx3.strokeText("hello canvas",10,50);
61     </script>
62 
63     <!-- 5.canvas渐变 -->
64 
65     <!-- 渐变有两种方式：
66     1.线性渐变：createLinearGradient(x1,y1,x2,y2);
67     2.圆形渐变：createRadialGradient(x1,y1,r1,x2,y2,r2)
68     使用两种以上的渐变颜色：addColorStop(change,color):change在0~1之间 -->
69     <canvas id="canv4" width="200px" height="200px" style="border:1px solid">     </canvas>
70     <script type="text/javascript">
71         var ctx4=document.getElementById('canv4').getContext('2d');
72         // var lGradient=ctx4.createLinearGradient(0,0,200,0);
73         // lGradient.addColorStop(0.8,'white');
74         // lGradient.addColorStop(0.5,'orange');
75 
76         // ctx4.fillStyle=lGradient;
77 
78         var rGradient=ctx4.createRadialGradient(50,50,10,75,80,50);
79         rGradient.addColorStop(1,'gold');
80         rGradient.addColorStop(0,'red');
81         rGradient.addColorStop(0.3,'white');
82         ctx4.fillStyle=rGradient;
83         ctx4.fillRect(0,0,150,150);
84     </script>
85 
86     <!-- 6.canvas放置图像:drawImage(img,x,y); -->
87      <img src="test.jpg" alt=" picture for testing" width="150px" height="150px" id="test">
88     <canvas id="canv5" width="200px" height="200px" style="border:1px solid;">     </canvas>
89    
90     <script type="text/javascript">
91         var ctx5=document.getElementById('canv5').getContext('2d');
92         var img=document.getElementById('test');
93         img.onload=function(){
94             ctx5.drawImage(img,5,5);
95         }
96     </script>
97 
98 </body>
99 </html>

View Code

运行结果：