日期:2014-05-17 浏览次数:20694 次
2011-11-23 晴 大连
日子过的真是快啊,一晃,有过了一年.今天看到IT组织大家一起学习HTML 5 ,我也兴起,也写写文章,介绍一下HTML的学习心得
?
在这里就不介绍HTML 5 到底是什么了,我想大家基本也能在网上找到,我就说下HTML 5 以后的发展
?
在查找一些资料后,知道了HTML 5 将在2012年发布候选推荐版,也就是说,现在HTML 5 还没有正式发布哦,还有就是2022年将发布计划推荐版 这个我想通过10年的努力
,HTML 5一定会更加的强大
?
HTML 5 提倡“简单至上,尽可能简化”
体现在:
?
<!DOCTYPE html> <head> <meta charset="utf-8" /> </head> <html> <body> <h1> Hello HTML 5</h1> <h2> Hello HTML 5</h2> <h3> Hello HTML 5</h3> <h4> Hello HTML 5</h4> <h5> Hello HTML 5</h5> </body> </html>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
?
?
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
?
?
比较之下,现在我们写的代码是越来越少了,而且更好记忆力
?
在这里我想也说明一下,为什么要学习HTML 5 ,HTML 5 真的增加了现在页面上迫切想添加到东西。
比如:画图功能,实时跟踪功能,节点定位,web SQL等等,让我慢慢的和大家分享也一下
?
1.Canvas API
Canvas API 可以动态的生成和展示图形,图表,图像以及动画。
SVG和Canvas API有很多相似的东西
分析:Canvas API不能想SVG图像那样可以被放大缩小,而且它也不存在页面DOM结构下(不足)
? ? ? ?Canvas API执行的性能非常好,这个毋庸置疑
?
代码实现:
<!DOCTYPE html> <html> <head> <script type="text/javascript" > <!-- function dotest(){ var canvas = document.getElementById("test"); var context = canvas.getContext("2d"); context.beginPath(); context.moveTo(0,300); context.lineTo(300,0); context.stroke(); context.save(); context.translate(70,140); context.beginPath(); context.moveTo(0,0); context.lineTo(70,-70); context.stroke(); context.restore(); } window.addEventListener("load",dotest,true); //--> </script> </head> <body> <canvas id= "test" width="300" height="300" style="border : 1px solid;border-width: 5px;"/> </body> </html>?
?
待。。。。
?
?
?