HTML5使用总结（一）

自己在“上海某985大学”待了五年，有蛮多的不舍。但是终究还是要离开。下面对这几年HTML5的使用做一个总结。总结是一种技术的沉淀。
HTML5大家现在很火，它的标准已经出来。在标准还没有成型的时候，相信我们都已经开始使用HTML5的图表和研究HTML5的游戏引擎了。HTML5跨平台和轻量级，这是本人最喜欢的一点。
虽然期间也考虑过Mono.
大二（2009年）就开始使用HTML4.0,哪个时候为“页面动画效果、浏览器的兼容性、分辨率的设置”吐了多少血。现在使用HTML5，有一种拨开乌云见明月的赶脚。虽然期间也是用过Silverlight，
但是还是HTML5的表现更加给力。但Webkit浏览器和Mozilla浏览器有些CSS属性还是要单独定义。
H5的API比H4主要有一下一些特性：Canvas、CSS3、SVG、Vidio&Audio、拖放功能、脱机Web应用程序、WebSocket、WebWorkers、本地数据存储、Geolocation。下面我们分别介绍下每个功能的特性。

一、Canvas
顾名思义它是一个面板。面板我们都知道，我们可以在上面画我们想要的任何东西。“任何东西”，则说明它是一个可以编程的容器。我们以前只能使用HTML的各种标签，使用图片，结合JS实现。
现在Canvas可以充当PS图层一样的面板，让我们涂鸦。那个感觉当然爽。
操作Canvas的主要JS方法和属性有：
（1）Context:上下文。Canvas就行绘画的通知，Context就相当于绘画用的画笔。getContext("2d");
(2)设置颜色：fillStyle/fillRect
(3)路径绘制图形：
a、获取Context.b、调用BeginPath、使用moveTo()、lineTo方法指定坐标和绘制直线、closePath()结束路径。不论话什么形状都可以。当然要有耐心。当然一些规则的图形，像圆弧、矩形、
椭圆都是可以直接调用函数进行绘制的。
（4）颜色设置。
strokeStyle：描绘轮廓线、fillStyle：填充轮廓线。
（5）渐变设置。（CSS3也可以设置渐变，原来只能使用图片）
线性渐变：createLinearGradient，圆形渐变：createRadialGradient
（6）图像处理。
Canvas表现的是位图，如果缩放会造成失真。Svg是矢量图。但由于Canvas是位图，所以它可以把图像按像素处理。getImageData()获取Canvas的像素数据，然后加工，putImageData()重新绘制到
Canvas。
(7)绘制图表。
我们使用过大量的图表，像HighCharts、ECharts、FusionChats（记得原来是Flash）。但是这些图表都是用svg来做的，当然Canvas也可以做，但是无有缩放效果。
a、绘制背景。b、绘制X轴和Y轴。c、绘制X轴和Y轴分割线。d、计算数据点的坐标。e、绘制折线和矩形。
(8)旋转和变形。
scale()：缩放。translate()：移动。rotate():旋转。矩阵变换:setTramsform。
（9）绘制文本。
fillText:描绘文本。strokeText：描绘文件轮廓。
（10）动画效果。
CSS3可以直接定义动画效果。但是Canvas中的动画，必须用JS+Canvas元素来做。
二、CSS3
最新的CSS3的主要特性就是“文本和图像”的特效。比如阴影、半透明、旋转、动画等。
（1）阴影
-webkit-box-shadow和-moz-box-shadow
（2）颜色设置
"#FFFFFF"、rgb（）、rgba()、hsl()、hsla（）
（3）变形
-webkit-transform、-moz-transtorm
（4）动画
CSS3定义动画和Flash定义动画类似，都是设置关键帧。然后将定义好的关键帧，设置给某些HTML5元素的样式就可以了。
（5）特效
圆角（-webkit-border-radius和）、渐变（gradient）、倒影（-webkit-box-relect）