专栏首页Micro_awake webHTML5特性&&canvas

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>

  • 还有一种方法就是:引用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>

 运行结果:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 从输入一个URL到页面完全显示发生了什么?

    用户1149564
  • HTML5 Web缓存&运用程序缓存&cookie,session

    在介绍HTML5 web缓存前,来认识一下cookie和session: session: 由于HTTP是无状态的,你是谁?你干了什么?抱歉服务器都是不知道的。...

    用户1149564
  • 从输入一个URL到页面完全显示发生了什么?

    网络通信走的一般是五层因特网协议,详见下图。图片来自于https://images2018.cnblogs.com/blog/882926/201711/882...

    用户1149564
  • 小程序-实现竖排文字(二)

    前一篇文章《小程序-实现竖排文字》只说了一个解决方案,这次再说一些别的解决方案。 把每一句古诗竖排布局,wxml 代码结构: <view class="mod-...

    前端黑板报
  • Python+Excel+Word一秒制作百份合同

    今天我们继续分享一个真实的办公自动化需求:如何使Python+Excel+Word批量生成指定格式内容的合同。

    刘早起
  • SAP CRM里产品主数据的文本模型设计

    Part1 and Part2 actually share the same assignment block COMM_PR_SHTEXT.

    Jerry Wang
  • 小程序 — canvas图片合成

    Ewall
  • android中实现在ImageView上随意画线涂鸦的方法

    2.重写onTouchEvent方法,在ACTION_MOVE(即移动时),记录下所经过的点坐标,在ACTION_UP时(即手指离开时,这时一条线已经画完),将...

    砸漏
  • Javascript的进阶版--VUE,使用vue载入基本使用结构,封装过的js更好用 刘金玉编程

    <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>

    刘金玉编程
  • 网页|HTML5 也可以画一画(canvas)

    在日常生活中总喜欢涂涂画画写写,这样可以使表达更加直观,记录的也更加详细,而在HTML5中同样可以画一画。canvas意为画布,现实生活中用它来作画,在HTML...

    算法与编程之美

扫码关注云+社区

领取腾讯云代金券