[转载]html5全接触（一）-Mikel

[转载]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 = 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> <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等等，具体使用方法见上面的参考文章地址。

[转载]html5全接触（一）

相关推荐

热门标签

分类

链接表

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏