码迷,mamicode.com
首页 > Web开发 > 详细

HTML5特性&&canvas

时间:2017-11-19 14:13:04      阅读:221      评论:0      收藏:0      [点我收藏+]

标签:顺序   one   控件   标签   bsp   自动删除   col   play   audio   

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

 运行结果:

技术分享图片

 

HTML5特性&&canvas

标签:顺序   one   控件   标签   bsp   自动删除   col   play   audio   

原文地址:http://www.cnblogs.com/why-not-try/p/7859523.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!