css3 乌云散去,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)