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>

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

posted on 2011-02-20 00:16 岑安阅读(3615) 评论(10) 编辑收藏举报

刷新页面返回顶部

叶落为重生每片落下的叶子都是为了下一次的涅槃...^_^

html5全接触（一）

导航

公告