html5全接触（一）

时间：2011-02-20 来源：岑安

其实稍微细心点看下，国外的对这两个新技术的使用已经很常见了，尤其是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>

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>canvas math</title> <meta name="author" content="hongru.chen" /> <style> body {margin:0; background:#000;} canvas {display:block; margin: 10px auto;} </style> </head> <body> <canvas id="canvas" width="600" height="600">Your Broswer don't support html5 canvas!</canvas> </body> </html>

源码就不贴了，demo比较简单，就用到了canvas的几个基本的函数，如fillRect，translate，beginPath，moveTo，lineTo，stroke，rotate等等，具体使用方法见上面的参考文章地址。