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)