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>- 还有一种方法就是：引用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]-->
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>运行结果：
HTML5特性&&canvas
原文地址：http://www.cnblogs.com/why-not-try/p/7859523.html