H5 Canvas2DLib Konva基本使用、绘制太阳系、Echarts

Konva
  1.Konva基本使用
  2.绘制太阳系

Echarts
  1.Echarts基本使用
  2.EchartsDemo

Canvas2D绘制图形、特效,从零开始工作太繁重,可以借助于一些优秀的第三方库实现,例如KonvaEcharts

本文源码http://download.csdn.net/detail/linjiqian/9734689




Konva

Konva基础文档 http://download.csdn.net/detail/linjiqian/9734633

 1.Konva基本使用

Konva动态创建CanvasDOM元素对象的同时会创建一个divDOM对象并将CanvasDOM添加入divDOM中,这个过程称为创建舞台。
  创建舞台var stage = new Konva.Stage({ width: 400,height: 400,container: 'div'});,舞台必须搭建在演示厅上,其中container参数就是指定演示厅,container指向一个DOM元素的id,表示舞台将会搭建在这之上。
  既然有舞台就要有节目,将Konva.Layer比作节目,绘制的内容就是演员了。
   创建Konva.Stage可接受参数表。

H5 Canvas2DLib Konva基本使用、绘制太阳系、Echarts_第1张图片
demo1.gif




    
    demo1


    
    

 2.绘制太阳系

H5 Canvas2DLib Konva基本使用、绘制太阳系、Echarts_第2张图片
SolarSystem.gif




    
    SolarSystem


    
    




Echarts

Echarts文档

  1.Echarts基本使用

Echarts是baidu的一套Canvas2d绘制图形框架,有很多常用的案例。
    http://echarts.baidu.com/examples.html

  2.EchartsDemo

H5 Canvas2DLib Konva基本使用、绘制太阳系、Echarts_第3张图片
EchartsDemo.gif




    
    echarts



    










你可能感兴趣的:(H5 Canvas2DLib Konva基本使用、绘制太阳系、Echarts)