HTML5特性&&canvas
阿新 • • 發佈：2017-11-19
a10 img char rst testin hit mov eset lineto 
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 <styleView Codetype="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]-->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
運行結果：
HTML5特性&&canvas