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. LeetCode 690 Employee Importance 解题报告

    题目要求 You are given a data structure of employee information, which includes the employee's unique id ...

  2. elasticsearch更新doc文档

    在elasticsearch-head中: http://localhost:9200/my_index/products/2/ _update { "script" : { &q ...

  3. 第三方python 加密库 --- cryptography

    1,安装依赖 pip install cryptography 2,生成秘钥 from cryptography.fernet import Fernet #秘钥#随机生成秘钥 cipher_key ...

  4. Maven项目常见的小问题

    pom.xml文件头报错 场景 例Failure to transfer org.apache.maven.plugins:maven-surefire-plugin:pom:2.12.4 from ...

  5. Vue中父子组件执行的先后顺序

    Vera   Vue中父子组件执行的先后顺序探讨(转载) 前几天,朋友向我提出了一个关于Vue中父子组件执行的先后顺序问题,相信很多朋友在学习的过程中也会遇到这个问题,所以我就在此提出我自己的一些小看 ...

  6. module_init 内核调用过程

    内核版本:linux_2.6.22.6 入口源文件: init.h

  7. 001-快速搭建Spring web应用【springboot 2.0.4】-gradle、springboot的启动过程分析、gradle多模块构建

    一.概述 学习<精通Spring MVC4>书籍笔记 二.笔记 1.快速构建Spring starter web项目几种方式 1>使用Spring Tool Suite生成Start ...

  8. spark提交任务的三种的方法

    在学习Spark过程中,资料中介绍的提交Spark Job的方式主要有三种: 第一种: 通过命令行的方式提交Job,使用spark 自带的spark-submit工具提交,官网和大多数参考资料都是已这 ...

  9. [js]js的表单验证

    http://uule.iteye.com/blog/2183622 表单验证类 <form class="form" method="post" id= ...

  10. PageHelper分页插件

    在mybatis配置文件(SqlMapConfig.xml)中配置 <?xml version="1.0" encoding="UTF-8" ?> ...