设为首页 加入收藏

TOP

HTML5-Canvas实例:2D折线数据图与2D扇形图
2015-02-25 16:15:33 来源: 作者: 【 】 浏览:58
Tags:HTML5-Canvas 实例 数据 扇形

在页面上创建canvas标签,然后获取canvas这个元素,因为是画2D图,所以是调用.getContext('2d') 二维图方法


canvas作图的平面空间,该空间的每个点都有自己的坐标,x表示横坐标,y表示竖坐标。原点(0, 0)位于图像左上角,x轴的正向是原点向右,y轴的正向是原点向下。


部分API的介绍: 


封装:


  描绘路径必需知道起点坐标与终点坐标,因为可能是多次描绘,所以就需要用到二维数组把各个坐标保存下来,如[ [0,0],[100,50],[2,50] ],然后遍历二维数组,多次调用lineTo方法进行描绘。封装函数如下:


例子:月份成绩分数对比曲线图


  


完整代码:


?扇形图:


  arc方法的x和y参数是圆心坐标,radius是半径,startAngle和endAngle则是扇形的起始角度和终止角度(以弧度表示,Math.PI*2表示360度),anticlockwise表示做图时应该逆时针画(true)还是顺时针画(false)


  例子:


--------------------------------------分割线 --------------------------------------


--------------------------------------分割线 --------------------------------------


】【打印繁体】【投稿】【收藏】 【推荐】【举报】【评论】 【关闭】 【返回顶部
分享到: 
上一篇HTML5-Canvas实例:刮刮乐游戏 下一篇Java中的UUID

评论

帐  号: 密码: (新用户注册)
验 证 码:
表  情:
内  容: