html5简单实例(1/2)

来源:转载

互联网日新月异,尤其是近一两年,各种前卫的技术开始频频出现在人们视野中,比如html5,css教程3,虽然规范仍旧在不断修订的草案中,但是已经不妨碍前卫的设计师或者前端工程师们的尝试了。企图利用这种变迁带给用户不一样的新奇体验。

 其实稍微细心点看下,国外的对这两个新技术的使用已经很常见了,尤其是css3,各种圆角阴影甚至dom变换都开始用css3才完成,而在低版本的ie中采用优雅降级的处理方式。这是一个过渡阶段,总有一天,会完全过渡到那个闪耀着诱人光圈的时代。

 所以,为了与时俱进,我也开始抽空余时间学习一下这两个更为强大的武器。并将陆续的将学习过程中的一些小实践分享给大家,仅仅起个抛砖引玉的作用。可能更多的是和html5相关的东东,如canvas,或者svg。因为本人是个视觉主义者,更喜欢一些有视觉冲击力的东东。

 至于canvas的基本api,我就不详讲了,因为有人比我讲的更好,请参考http://dev.opera.com/articles/view/html-5-canvas-the-basics/ 或翻译版http://kb.operachina.com/node/190 。

 为了使学习不那么无趣,我喜欢做一点点好玩的东西,哪怕是很简单的东东。

 【以下demo请使用新版本的现代浏览器如firefox3.0+,chrome8.0+,等等查看,ie9未经测试, 看不到效果的请拷代码本地运行】

<!doctype html>

<html>

<head>

<meta charset="utf-8" />

<style>body{margin:0; overflow:hidden;}</style>

<script>

onload = function () {

var c = math.cos,

s = math.sin,

w = window,

d = document.getelementbyid("canvas"),

n = 360,c = d.getcontext("2d");
c.fillrect(0, 0, d.width = w.innerwidth, d.height = w.innerheight);
c.globalcompositeoperation = "lighter";
c.linewidth = .5;
var st = setinterval(function () {
if (n >= 3) {
c.font = ""+math.ceil(120-n/3)+"px 宋体";
c.globalalpha = n / 1000;
c.strokestyle = "hsl(" + (n + 110 % 360) + ",99%,50%)";
x = -n * c(n / 100);
y = 250 - s(n / 360 ) * n / 2.5;
c.stroketext("岑安", x + 100, y);
c.font = ""+n/3+"px georgia";
c.stroketext("html5", x + 380, y + 255);
n -= 1;
} else clearinterval(st);
}, 16)
}
</script>
</head>
<body>
<canvas id="canvas">your browser don't support html canvas!</canvas>
</body>
</html>

 

1 2



分享给朋友:
您可能感兴趣的文章:
随机阅读: