html5 简介
html5是html的最新修订版,2014年由w3c制定;
html5的设计目的是为了在移动设备上支持多媒体;
html在很多方面都进行了改进,下面我们就大致列举了一些html5改进的地方。
1. html5多媒体
使用html5技术我们可以再网页中播放视频(video)和音频(auto);
2. html5应用
本地数据存储、访问本地文件、本地sql数据、缓存引用、JavaScript工作者、xhtmlhttprequest2;
3. html5图形
使用html5可以简单地绘制图形,可以使用元素、内联SVG、css 2d(3d)转换;
4. html5使用css3
新选择器、新属性、动画、2D/3D转换、圆角、阴影效果、可下载字体;
5. html5定义新标签
我们可以定义属于自己的自定义标签。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>html图像</title>
<style type="text/css">
qiStyle{
color: blue;
background-color: #f3f3f3
font-size: 20px;
}
</style>
</head>
<body>
<qiStyle>我自己的风格</qiStyle>
</body>
</html>
6. html5的浏览器支持
E9以下版本可能对html5支持不好,需要在head中对情况进行处理;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>渲染 HTML5</title>
<!--[if lt IE 9]>
<script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->
</head>
<body>
<h1>我的第一篇文章</h1>
<article>
菜鸟教程 —— 学的不仅是技术,更是梦想!!!
</article>
</body>
</html>
html5 canvas
- html5中添加了<canvas>标签来定义图形;
- 从字面意思上来看我们不难发现,此标签只是定义了图形的载体(画布),而非定义了图形的实现,所以我们需要借助脚本来实现绘制图形。
- <canvas>没有绘图能来,需要借助javascript来实现绘图;
- 这点和android中的canvas意义对等;
- javascript实现绘图的基本流程;
- 1.在页面上创建一个画布;
- 2.在script中获取<canvas>画布元素;
- 3.获取内建的getContext(“2d”)html5对象,它具有绘制路径、矩形、圆形、字符等的能力;
- 4.设置getContext(“2d”)对象的属性;
- 5.开始绘制图形;
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>canvas</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="200"></canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF4200";
ctx.fillRect(0, 0, 200, 200);
</script>
</body>
</html>
1. canvas坐标、路径
- 由于撸主是做android的,所以这块略过;
2. canvas文本
- font定义字体;
- fillText(text, x, y),绘制实心文本;
- strokeText(text, x, y),绘制空心文本;
3. canvas渐变
- 列表内容
示例:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>canvas</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="200"></canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var grd=ctx.createLinearGradient(0, 0, 150, 0);
grd.addColorStop(0, "#FF4A00");
grd.addColorStop(1, "#ffffff");
ctx.fillStyle=grd;
ctx.fillRect(0, 0, 200, 200);
ctx.fillStyle="#000000";
ctx.font="30px Arial";
ctx.fillText("戚继光", 0, 100);
</script>
</body>
</html>
4. canvas图像
把一副图像放置到画布上,使用以下方法:
drawImage(image,x,y)。
html5 内联SVG
何为SVG
- 可伸缩矢量图形;
- 用于网络基于矢量的图形;
- 使用xml格式定义图形;
- 图像在放大或者改变尺寸时图形质量不会受影响;
SVG优势
- SVG图像可通过文本编辑器来创建和修改;
- SVG图像可被搜索、索引、脚本化、压缩等;
- SVG是可伸缩的;
- SVG图像可在任何分辨率下高质量打印;
SVG和Canvas区别
- SVG是通过xml来描述2D图像的语言,Canvas通过JavaScript来描述;
- 在SVG中,每个绘制的图形都被视为对象。如果SVG对象的属性发生变化,浏览器会自动重现图像,类似于响应式编程;
- Canvas是逐像素进行渲染的,一旦绘制完成浏览器不再关注它,属性发生变化需要重新绘制,类似于流程式编程;
Canvas特点
- 依赖分辨率;
- 不支持事件处理器;
- 弱的文本渲染能力;
- 能够以 .png 或 .jpg 格式保存结果图像;
- 最适合图像密集型的游戏,其中的许多对象会被频繁重绘;
SVG特点
- 不依赖分辨率;
- 支持事件处理器;
- 最适合带有大型渲染区域的应用程序(比如谷歌地图);
- 复杂度高会减慢渲染速度(任何过度使用 DOM 的应用都不快);
- 不适合游戏应用;
SVG示例
<!DOCTYPE html>
<html>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
<polygon points="100,10 40,180 190,60 10,60 160,180"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;">
</svg>
</body>
</html>
html5 MathML
html5可以在文档中使用MathML元素,对应的是<math>…</math>。
MathML 是数学标记语言,是一种基于XML(标准通用标记语言的子集)的标准,用来在互联网上书写数学符号和公式的置标语言。
目前还不看清楚如何应用,以后再回来更新吧。