網際網路日新月異，尤其是近一兩年，各種前衛的技術開始頻頻出現在人們視野中，比如html5，css3，雖然規範仍舊在不斷修訂的草案中，但是已經不妨礙前衛的設計師或者前端工程師們的嘗試了。企圖利用這種變遷帶給使用者不一樣的新奇體驗。
其實稍微細心點看下，國外的對這兩個新技術的使用已經很常見了，尤其是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 = 2000, d.height = 1000); 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等等，具體使用方法見上面的參考文章地址。