为什么要学html5 canvas

canvas翻译过来是画布,画布的作用的当然是画图,只要你的应用当中需要用到图表,那么canvas可以实现你大部分图形界面展示;我从事过金融行业,期货交易,工作中需要做数据分析和策略分析,柜台拿到的数据都是数字化的(目前来说,行业里面传递数据大部分是使用websocket),那么我就要将数字化的东西用图表呈现出来,比如K线图、分时图、价差图表;数据图表化之后交给策略人员进行策略开发。

开发后台的时候,我们也会用到canvas,比如交易数据占比、销售趋势数据等等。

canvas用途

可以用canvas画各种各样的图,包括:

  • 饼图
  • 折线图
  • 树形图
  • 地理坐标
  • 柱状图
  • 散点图

等等,凡是你需要用到的图形,都可以画出来。

Canvas与Svg比较

SVGCanvas都是可以在web浏览器中绘图的技术。SVG是Scalable Vector Graphics的缩写(可缩放矢量图形);它是一种基于矢量的图形,使用基于XML的图形格式;canvas画出来的图像则是位图图像,是用javascript操作浏览器提供的api自己画出来的;它两个的关系可以用ps和ai软件进行比对。SVG图像比位图图像好得多,因为位图图像放大之后会变形,现在很多前端图标库就是用svg技术来实现的。在SVG图像中,矢量图像由一组固定的形状组成,当缩放这些图像时,它会保留图像的形状。Canvas是一个HTML元素,用于在web页面上绘制图形;它被称为是一种即时图形编程模;因为它在上面画画,元素画布用作图形的容器;在画布中,我们需要脚本来绘制图形。

这两种技术各有其用武之地,canvas可以用javascript画图,依赖于脚本操作,适用于游戏开发等领域;而svg则更加依赖于xml文件,利用标签画图,但是svg的图像可以随意伸缩而不变形。至于选择哪种技术可以根据具体应用相应选择。

本教程致力于canvas,svg就不过多讨论了。

Canvas相应的包装库

canvas有很多包装库,比如d3.jsChart.jsZrenderEChartshighcharts等等,其中ECharts是在zrender基础之上开发的;这些库让开发者更加容易使用。但是我建议学一遍canvas的api再去用这些库,这样更加得心应手,甚至不合意的时候,自己封装或者修改上层库。

~~好吧,跟我一起走进canvas编程之旅 。

渝ICP备20006974号