丨如何使用canvas绘制统计图表下_第1页
丨如何使用canvas绘制统计图表下_第2页
丨如何使用canvas绘制统计图表下_第3页
丨如何使用canvas绘制统计图表下_第4页
丨如何使用canvas绘制统计图表下_第5页
已阅读5页，还剩12页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

WebRTC实际上，关于WebRTC统计方面的内容我面《WebRTC中的数据统计原来这么强大》的两篇文章中已经做了详细的介绍。而今天我们要讲的主要内容是如何使用Canvas进行WebRTCChome现WebRTC的统计信息的。要想看到这个图表，你需按以下步骤操作：在Chrome浏览器中同时打开两个tab在两个tab页面中输入https /getstats/index.html地址，这是一个用于测试WebRTC的URL地址；在每一个打开的页面中，点击“ConnectSigServer”按钮，此时每个页面都会出现两个窗口，这说明WebRTC通信已经建立成功了；在Chrome浏览器中再打开一个tab页面（也就是第三个页面），输入chrome://webrtc-internals/WebRTCStatsgraphsWebRTC统计信息图（一WebRTC统计信息图（二在统计信息页面中，你可以点击鼠标右键，在弹出的菜单中选择“检查面的HTML源码，也就是上面两 在chrome://webrtc-internals/地址源码的<head>中，了和util.js两个JavaScript，代码如下所示<script<script中完成的那这些图表是怎么绘制出来的呢？为了解开这个迷团，我们来观察一下“WebRTC统计信息图（一）”这。在这中，左侧红框框中的信息表示的是id为“12756-1-pound-div”的DIV，在这个DIV中绘制了一张发送带宽的图表。然后，我们再来看一下这表所对应的代码，也就是图中右侧红框框中的HTML5代码，从中我们可以知道，左侧的图表是由右侧的HTML5代码中的<canvas>绘制在“WebRTC统计信息图（二）”中，我在图的右侧用红框选中了webrtc_internals.js，在该的源码中，我们能够看到在webrtc_internals.js中调用了getContext('2varcontext=this.canvas_.getContext('2d');//获得canvascontext.fillstyle=BACKGROUND_COLOR;//context.fillRect(0,0,width,heigth);//的各种统计图表都是通过Canvas来绘制的了解了上面的这些信息后，下面我们就来分析一下WebRTC是如何通过Canvas来绘制图CanvasCanvas可以绘制矩形、路径、圆弧等基本几何图形，通过这些基本图形的组合，可以绘制除了绘制各种图形外，Canvas还可以对图形进行颜色填充和边框涂色。而对图形的操作，如旋转、伸缩、位置变换等也是Canvas必备的功能。下面我们就来学下如何通过Canvas通过上面的描述，你应该已经知道了Canvas的功能还是非常强大的，通过它可以绘制各种复杂的图形。不过在使用Canvas绘制各种复杂的图形之前，你必须要先了解Canvas的坐标系。只有对Canvas的坐标系了解清楚了，你才能做后面的事儿。CanvasCanvasXY为Canvas绘制的是像素图，所以你可以把上图坐标系中的小方格理解为一个个像素。另外，Canvas0,0)点来绘图，也可以改成相对(x,y)点来绘图，这是通过接口translate(x,y)来实现的。也就是说，当你想改变坐标系的原点时，可以通过调用translate(x,y)这个API将原点设置为(x,y)点，这样你后面所有图形的绘制都是基于(x,y)这个坐标点的相对坐标了。坐标原点变换，主要是为了处理上的方save()/restore()等API绘制WebRTC关于绘制WebRTC统计图表的实现，可以参考在 上的Chrome源码的镜像，在这绘制WebRTC当我们在浏览器的tab页中输入chrome://webrtc-internals/打开WebRTC的统计页面后，该页面首先会通过WebRTC的RTCPeerConnection对象的getStatsAPI获取WebRTC的各种统计数据，然后按照不同的分类，将数据转成一个的DataPoint。chrome://webrtc-internals/会启动一个定时器，每秒触发一次，这样就可以每秒调用一次getStats方法获取统计数据，然后生成各种DataPoint对象。随着时间的推移，这些DataPoint就可以连成一条线了。每种DataPoint都被保存到TimelineDataSeries对象中。该对象是按时间排序的数据集。当然，在该数据集中所有的DataPoint都属于一类，举个例子，每秒钟发送端带宽TimelineGraphView中显示。但在我们的例子中，每个图表只绘制了一种曲线。GraphCanvas首先是DataPoint类functionDataPoint(time,value)this.time=time;//this.value=value;//4其次是TimelineDataSeries类//this.dataPoints_=//this.color_=//this.isVisible_= DataPoint再次是TimelineGraphView类//获得this.canvas_=.ge4//this.startTime_=//this.endTime_=//graphthis.graph_=//this.scale_=//TimelineGraphViewCanvas属性最后一个是Graph类//TimelineDataSeriesthis.dataSeries_=45//Cachedpropertiesofthegraph,setin6this.width_=0;//7this.height_=0;//8通过上面的属性你可以知道，Graph对象里存放了TimelieDaaeries对象数组，也就是说可以在一 表中绘制多条不同的曲线。除此之外，Graph中还定义了图表的宽度和高度。那Graph是如何通过Canvas绘制图形的呢1repaint:function()2 4letwidth=letheight=letcontext=8//清空context.fillStyle=context.fillRect(0,0,width, if(this.graph_)// 23drawLines:function(context)//编译每个TimelineDataSeriesfor(leti=this.dataSeries_.length-1;i>=0;--i)//从TimelineDataSeriesletvalues=if(!values) //context.strokeStyle=for(letx=0;x<values.length;++x)//x,bottom-Math.round((values[x]-this.min_)* 44在Graph中首先调用repaint函数进行绘图，在该函数中通过Canvas元素获取到了CanvasCanvasdrawLines在drawLines函数中，它从dataSeries数组中取DataPoint数据，之后调用context.lineToWebRTC通过上面的分析，你应该可以看出使用HTML5中的Canvas来绘制图表还是蛮简单本文通过个例子，向你讲述了WebRTC的统计信息图表是如何通过Canvas来实现的。还分析了在Chrome浏览器中的chrome://webrtc-internals统计页面中各种统计信息图另外，你还需要知道，Chrome浏览器中提供的统计信息的功能非常强大，除了本文介绍的可视化图表外，更重要的是你需要理解统计数据的含义，这样才更有利于分析产品中遇到的问题。对于这些数据的含义我在之前的文章中已经向你做了介绍，不清楚的同学可以再回顾一下之前的内容。所以，你如果有时

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论