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测试通过)
 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>hello HTML5</title>

     <script type="text/javascript">

         // 创建了test标签

         document.createElement('test');

     </script>

     <style type="text/css">

         test{

             display: block;

             background-color: orange;

             font-size: 26px;

             text-align: center;

         }

     </style>

 </head>

 <body>

     <test>hello "test" tag</test>

 </body>

 </html>
  • 还有一种方法就是：引用html5shiv文件。（这是一种比较好的解决IE6-8不识别HTML5新元素方法，但是这些引入的新元素不能作为父元素包裹子元素；并且不能运用css样式╮(╯▽╰)╭，“万恶”的IE╮(╯▽╰)╭）
     <!--[if lt IE 9]>

     <script type="text/javascript" src="http://cdn.bootcss.com/html5shiv/r29/html5.min.js"></script>

     <![end if]-->

5.Canvas元素：

注释/注意的地方都在代码里面了：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>hello canvas</title>

 </head>

 <body>

     <!-- 注意加载顺序，可简单理解为由上至下加载 -->

     <!-- 默认情况下，canvas没有边框和内容 -->

     <!-- 1.绘制矩形 -->

     <canvas id="canv" width="200px" height="200px" style="border:1px solid;">

     浏览器不支持canvas标签</canvas>

     <script type="text/javascript">

         var canv=document.getElementById('canv');

         var ctx=canv.getContext('2d');

         ctx.fillStyle='orange';

         // 绘制矩形，左上角坐标和右下角坐标

         ctx.fillRect(0,0,150,150);

     </script>

     <!-- 2.绘制直线 -->

     <canvas id="canv1" width="200px" height="200px" style="border:1px solid;">

     </canvas>

     <script type="text/javascript">

         var ctx1=document.getElementById('canv1').getContext('2d');

         // 绘制直线，moveTo：定义开始坐标；lineTo：定义结束坐标

         ctx1.strokeStyle="orange";//定义直线颜色

         ctx1.lineWidth="10";//定义直线宽度

         ctx1.moveTo(0,0);

         ctx1.lineTo(150,150);

         ctx1.stroke();

     </script>

     <!-- 3.绘制圆 -->

     <canvas id="canv2" width="200px" height="200px" style="border:1px solid;">浏览器不支持canvas标签

     </canvas>

     <script type="text/javascript">

         var ctx2=document.getElementById('canv2').getContext('2d');

         ctx2.beginPath();

         // arc(x,y,r,start,stop):圆心x,y坐标;半径;起始角度：与圆心平行的右端为0度；结束角度

         // Math.PI表示180度，顺时针画圆

         ctx2.arc(100,100,50,0,2*Math.PI);

         ctx2.stroke();

     </script>

     <!-- 4.绘制文本 -->

     <canvas id="canv3" width="200px" height="200px" style="border:1px solid">

     </canvas>

     <script type="text/javascript">

         var ctx3=document.getElementById('canv3').getContext('2d');

         ctx3.font="30px Arial";

         // fillText绘制的是实心的，strokeText绘制的是空心的

         // fillText(text,x,y,maxWidth):相对画布x,y输出text;

         // maxWidth:可选参数，text最大宽度

         ctx3.fillText("hello canvas",10,50);

         // ctx3.strokeText("hello canvas",10,50);

     </script>

     <!-- 5.canvas渐变 -->

     <!-- 渐变有两种方式：

     1.线性渐变：createLinearGradient(x1,y1,x2,y2);

     2.圆形渐变：createRadialGradient(x1,y1,r1,x2,y2,r2)

     使用两种以上的渐变颜色：addColorStop(change,color):change在0~1之间 -->

     <canvas id="canv4" width="200px" height="200px" style="border:1px solid">     </canvas>

     <script type="text/javascript">

         var ctx4=document.getElementById('canv4').getContext('2d');

         // var lGradient=ctx4.createLinearGradient(0,0,200,0);

         // lGradient.addColorStop(0.8,'white');

         // lGradient.addColorStop(0.5,'orange');

         // ctx4.fillStyle=lGradient;

         var rGradient=ctx4.createRadialGradient(50,50,10,75,80,50);

         rGradient.addColorStop(1,'gold');

         rGradient.addColorStop(0,'red');

         rGradient.addColorStop(0.3,'white');

         ctx4.fillStyle=rGradient;

         ctx4.fillRect(0,0,150,150);

     </script>

     <!-- 6.canvas放置图像:drawImage(img,x,y); -->

      <img src="test.jpg" alt=" picture for testing" width="150px" height="150px" id="test">

     <canvas id="canv5" width="200px" height="200px" style="border:1px solid;">     </canvas>

     <script type="text/javascript">

         var ctx5=document.getElementById('canv5').getContext('2d');

         var img=document.getElementById('test');

         img.onload=function(){

             ctx5.drawImage(img,5,5);

         }

     </script>

 </body>

 </html>

运行结果：

HTML5特性&&canvas的更多相关文章

  1. HTML5特性检測

    HTML5特性检測:    1.检測全局对象:诸如window或navigator是否拥有特定的属性    2.创建元素:检測该元素的DOM对象是否拥有特定的属性    3.创建元素:检測该元素的DO ...

  2. 浏览器对HTML5特性检測工具Modernizr

    近期在做公司移动端运营的项目,需求中多处地方都会涉及动画. 相信非常多前端开发都会有这样的感触,对CSS3中的动画属性非常熟悉,可是因为对动画运动过程的理解不深入,经常仅仅能望而止步.CSS3中动画这 ...

  3. HTML新特性--canvas绘图-文本

    一.html5新特性--canvas绘图-文本(重点) #常用方法与属性 -ctx.strokeText(str,x,y);   绘制描边文字(空心) str:绘制文本 x,y:字符串左上角位置(以文 ...

  4. HTML5特性速记图

    今天推荐大家一张HTML5特性速记图,供大家平时查阅,也可以打印放在电脑旁帮助速记.速查.此图笔者收集于网络图片.

  5. 用html5的canvas画布绘制贝塞尔曲线

    查看效果:http://keleyi.com/keleyi/phtml/html5/7.htm 完整代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHT ...

  6. HTML5在canvas中绘制复杂形状附效果截图

    HTML5在canvas中绘制复杂形状附效果截图 一.绘制复杂形状或路径 在简单的矩形不能满足需求的情况下,绘图环境提供了如下方法来绘制复杂的形状或路径. beginPath() : 开始绘制一个新路 ...

  7. HTML5之Canvas时钟(网页效果--每日一更)

    今天,带来的是使用HTML5中Canvas标签实现的动态时钟效果. 话不多说,先看效果:亲,请点击这里 众所周知,Canvas标签是HTML5中的灵魂,HTML5 Canvas是屏幕上的一个由Java ...

  8. HTML5 画布canvas元素

    HTML5的canvas元素以及随其而来的编程接口Canvas API应用前景极为广泛.简单地说,canvas元素能够在网页中创建一块矩形区域,这块矩形区域可以成为画布,这其中可以绘制各种图形.可别小 ...

  9. HTML5 之Canvas绘制太阳系

    <!DOCTYPE html> <html> <head> <title>HTML5_Canvas_SolarSystem</title> ...

随机推荐

  1. DBGridEh使用指南改变边框颜色

    DBGridEh使用指南 鹅倌0人评论422人阅读2012-08-06 15:17:59   1.设置表头,是否允许多表头,设置是否只读. dbgrdh1.TitleFont.Color:=clBlu ...

  2. 图->存储结构->十字链表

    文字描述 十字链表是有向图的另一种链式存储结构. 在十字链表中,对应于有向图中每一条弧有一个结点,对应于每个顶点也有一个结点.这些结点的结构如下所示: 在弧结点中有5个域: 尾域tailvex和头域h ...

  3. beego的https和http同时启用

    2017/07/19 14:01:03 [I] [asm_amd64.s:2197] http server Running on http://:8080 2017/07/19 14:01:03 [ ...

  4. Log4j与Logback

    一.Log4j简介: 1.Log4j(log for java) 01.是apache的一个开源项目 02.是使用java语言编写的一个日志框架 03.用于记录程序中的日志信息 04.可以将日志信息输 ...

  5. springmvc拦截器实现用户登录权限验证

    实现用户登录权限验证 先看一下我的项目的目录,我是在intellij idea 上开发的 1.先创建一个User类 package cn.lzc.po; public class User { pri ...

  6. dedecms批量修改文章为待审核稿件怎么操作

    dedecms批量修改文章为待审核稿件要怎么操作呢?因为我们有时会出于某些原因要把文章暂时先隐藏掉,dedecms有一个比较好的功能是将文件状态设为未审核前台就可以看不到了,那要怎么批量设置呢?到后台 ...

  7. finecms如何批量替换文章中的关键词?

    Finecms批量替换文章关键词要怎么操作呢,比如把关键词A换为B?Finecms是免费开源无商业限制的内容管理系统,个人在维护,但二次开发很灵活,我们可以通过开发插件或数据库sql语句来操作,下面就 ...

  8. 006-docker-安装-nginx

    1.搜索镜像 docker search nginx 2.拉取合适镜像 docker pull nginx docker images 3.使用镜像 docker run -p 8080:80 --n ...

  9. 前端框架之Vue(10)-全家桶简单使用实例

    vue-router官方文档 vuex官方文档 安装 npm install vue-router --save 使用实例 vue-router初使用(webpack-simple模板) 1.切换到指 ...

  10. Django 框架 数据库操作2

    一.ORM的操作方法总结 get(self, *args, **kwargs): # 获取单个对象 def one_get(request): #直接得到一个表对象,也就是表记录 如果得到多个会报错 ...