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 条评论
登录 后参与评论

相关文章

来自专栏Android干货

浅谈GridLayout(网格布局)

4079
来自专栏小狼的世界

不同浏览器对于换行的处理

在一个容器中,如果设定了宽度,一般来说自动换行都是比较正常的,但是如果遇到了连续的英文字符,这个问题就会让人头疼。这不,我们部门的用户在测试的时候输入连续的字符...

1252
来自专栏LinXunFeng的专栏

iOS - Swift UISearchController仿微信搜索框

3363
来自专栏向治洪

react-native之ART绘图详解

背景 在移动应用的开发过程中,绘制基本的二维图形或动画是必不可少的。然而,考虑到Android和iOS均有一套各自的API方案,因此采用一种更普遍接受的技术方案...

1.1K8
来自专栏柠檬先生

mix-blend-mode 混合模式 background-blend-mode 背景混合模式 isolation:isolate 隔离

css3 mix-blend-mode 混合模式 该属性不仅可以作用于HTML,还可以作用于SVG   兼容性: IE 8~11 Ed...

2326
来自专栏Python攻城狮

HTML 5&CSS快速入门1.计算机中的文件2.网页组成4.HTML基础操作

超文本标记语言(英语:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言。

3803
来自专栏web前端

制作H5响应式页面注意事项、微信二次分享

          1.2.1     重要的图片用img标签(例如头部banner等包含特定信息的内容图片),不重要的底板用背景形式显示,例如底部背景

2440
来自专栏帘卷西风的专栏

cocos2dx用checkbox实现单选框和button实现table按钮

转载请注明出处:帘卷西风的专栏(http://blog.csdn.net/ljxfblog)

991
来自专栏前端知识分享

第54天:原生js实现轮播图效果

一系列的大小相等的图片平铺,利用CSS布局只显示一张图片,其余隐藏。通过计算偏移量利用定时器实现自动播放,或通过手动点击事件切换图片。

4701
来自专栏守候书阁

CSS3热身实战--过渡与动画(实现炫酷下拉,手风琴,无缝滚动)

在自己的专栏上写了十几篇文章了,都是与js有关的。暂时还没有写过关于css3的文章。css3,给我的感觉就是,不难,但是很难玩转自如。今天,就用css3来实现三...

5674

扫码关注云+社区

领取腾讯云代金券