基于HTML5的图形化网页数据展示.docVIP

  1. 1、本文档共5页,可阅读全部内容。
  2. 2、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
  3. 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载
  4. 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
  5. 5、该文档为VIP文档,如果想要下载,成为VIP会员后,下载免费。
  6. 6、成为VIP后,下载本文档将扣除1次下载权益。下载后,不支持退款、换文档。如有疑问请联系我们
  7. 7、成为VIP后,您将拥有八大权益,权益包括:VIP文档下载权益、阅读免打扰、文档格式转换、高级专利检索、专属身份标志、高级客服、多端互通、版权登记。
  8. 8、VIP文档为合作方或网友上传,每下载1次, 网站将根据用户上传文档的质量评分、类型等,对文档贡献者给予高额补贴、流量扶持。如果你也想贡献VIP文档。上传文档
查看更多
基于HTML5的图形化网页数据展示.doc

基于HTML5的图形化网页数据展示   摘 要:在HTML4的时代,如果要将各种数据图表在互联网上展示出来,办法并不多。HTML、CSS+Javascript的展示能力,不管是从性能还是功能方面来说,都十分有限。这个时候Flash出现了,顿时千树万树梨花开,互联网时代迎来了多媒体时代,数据展示组件基于Flash也是大放异彩。但是Flash由于效率问题,功耗较高,还有文件尺寸偏大,语言独立不易学的问题。今天,HTML5来了,让我来用HTML5的新增功能Canvas技术实现一个漂亮的饼图控件,来为大家介绍HTML5在图形化网页数据展示方面的优势。   关键词:HTML5;数据展示;组件;Canvas;Javascript   1 Canvas介绍   HTML5中,对图形化网页数据展示影响最大的就要数Canvas了。本文接下来会对Canvas 2D模式进行介绍,并使用Canvas 2D实现一个饼状图的数据展示组件。在实现中,为节省篇幅,本文假设读者对Javascript和HTML都有一定的了解,将仅对Canvas相关部份进行重点讲解。   在介绍Canvas 2D之前,让我们先找一个饼状图的组件,并以它作为我们实现的目标:   百度搜到这个饼状图,看起来效果不错,我们来尝试实现它。   2 实现思路与具体实现   观察这个饼状图,最直观可以看到的就是它的黑色背景。我们要画饼状图,要先把它的背景画出来,那么如何在Canvas中画一个大大的黑色方框呢?首先我们必须在页面中有Canvas元素。即,之后,我们用js调用这个元素的getContext(“2d”)来获得2d的绘图上下文(注意2d的d必须是小写),之后我们就可以使用这个上下文来进行绘图了。在Canvas中,绘制矩形的方法是使用fillRect(x,y,w,h)方法,矩形的填充颜色使用fillStyle属性来设置。其中x,y是要绘制矩形的坐标,而w,h是要绘制矩形的宽度与高度。在Canvas的坐标系中,以Canvas元素的左上角为0,0,X轴向右延伸,Y轴向下延伸。所以要画一个400x400的矩形,代码如上。   效果:   成功!终于把背景完成了。下面我们来画饼,整个的饼图其实是由多个扇形组成的。在canvas的2d上下文中,画扇形的方式是使用“路径”功能,一个路径其实就是一个形状,想像一下有一个笔尖在画布上落下,这儿便是形状的起点,随着你的移动笔尖,线条就会出现在画布上,当你决定想完成这个形状的时候,从笔尖的当前位置,到形状的起点画一条直线,关闭形状区域,这个形状就画好了。在Canvas的绘图API中,并没有画圆的方法,只能画一定弧度的弧线,但我们可以画2π弧度的弧来画圆。Canvas画弧线的API如下:   arc(x,y,r,a1,a2,b)   其中:x,y为圆弧的圆心,r为圆弧半径,a1为起始弧度,a2为终止弧图,b为布尔值,代表画弧方向,b为true时代表逆时针画弧,b为false时代表顺时针画弧。Canvas画弧时以X轴正向(右方)为0度。   在Canvas API中,开始一个新的形状路径的API是openPath(),闭合一个形状的API是closePath();移动画笔,不进行绘画的API是moveTo(x,y),x,y为要移动画笔的目的坐标。从画笔当前坐标画一条线到x,y的API为lineTo(x,y)。Canvas中填充画好的形状的API是fill(),使用的颜色仍然是fillStyle属性。了解了这些,跟据图3中我们的设计。很容易可以画出我们的第一个弧。按我们这个思路,如果我们要画一个圆心坐标在200,200,半径为100,角度为30度(π/6)的黄色扇形,代码如下:   再看下效果:   现在,我们即会画矩形,也会画扇形了,我们当然也可以用这些扇形拼成一个圆。那么为了实现饼状图控件,我们现在唯一缺少的Canvas技术就是文字的显示了。   Canvas 2d上下文API中,和文字相关的内如有以下几个:   fillStyle属性:代表要绘制的文字颜色   font属性:要绘制的字体与字号。例值:”9px Arial”。字体为Arial,字号为9px   textBaseline属性:要绘制的字体与指定坐标的位置关系,值与效果如下图:   shadowColor属性:填充阴影颜色。   shadowOffsetX属性:填充阴影X偏移。   shadowOffsetY属性:填充阴影Y偏移。   fillText方法:fillText(text,x,y)。text为要绘制的文字内容,x,y为要绘制的坐标。   新增代码如下:   效果:   致此,完成一个饼图所需要的Canvas知识我们已经完全掌

文档评论(0)

lmother_lt + 关注
实名认证
文档贡献者

该用户很懒,什么也没介绍

1亿VIP精品文档

相关文档