html5全接触（1） _HTML/CSS

html5全接触（一）

互联网日新月异，尤其是近一两年，各种前卫的技术开始频频出现在人们视野中，比如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>
  <script>
var AmazingLine = function () {
var init = function (n, i, config) {
window[n] = this;
this.n = n;
var canvas = document.getElementById(i),
ctx = this.ctx = canvas.getContext('2d');
this.t = 0;
this.r = config.radius || 300;
this.draw();
}
init.prototype = {
draw : function () {
var _this = this;
this.ctx.fillRect(0, 0, 600, 600);
this.ctx.translate(300, 300);
for (var i=0; i<45; i++) {
for (var j=-45; j<=45; j+=15) {
setTimeout(new Function(this.n+'.drawLine('+j+')'), 50*this.t)
this.t ++;
}
}
},
drawLine : function (i) {
this.ctx.beginPath();
this.ctx.moveTo(0, this.r);
var r = Math.PI/180 * i, x = (this.r * Math.sin(r)) / Math.sin(Math.PI/2 - r)*r;
this.ctx.lineTo(x, Math.sin(x));
this.ctx.strokeStyle='rgb('+Math.ceil(Math.random()*255)+','+Math.ceil(Math.random()*255)+','+Math.ceil(Math.random()*255)+')';
this.ctx.lineWidth=.5;
this.ctx.stroke();
this.ctx.rotate(Math.PI/360 * 30);
}
}
return init;
}();
</script></head>
<body>
<canvas id="canvas" width="600" height="600">Your Broswer don't support html5 canvas!</canvas>
<script>
new AmazingLine('_mytest', 'canvas', {radius: 300})
</script></body>
</html>