H5新特性——--第三方绘图工具库 echarts(canvas)---SVG绘图

今天学习的内容

  3.1:h5新特性---第三方绘图工具库 echarts(canvas)

    

    百度 echarts;d3;two.js;....

  3.2:h5新特性---SVG绘图

  3.2:h5新特性---SVG绘图--矩形

   <svg id="" width="500" height="400">

    <rect width="" height="" x="" y="" fill="" fill-opacity=""

       stroke="" stroke-opacity=""></rect>

   </svg>

   练习1:在画布中央绘300*30柱子，初始化淡红色(#faa)
      填充和深红色(#800)边框，都是半透明
      鼠标悬停时变为不透明,
      提示:修改html元素属性setAttribute("",);
   练习2:绘制一个柱子，高度1，使用定时器，不断修改

      高度到300停止

  练习3:使用ajax从服务器异步获取一段json数据

      根据数据创建统计图

 

SVG 图形都是元素可以直接绑定事件监听

SVG 绘图特点

(1)所有图形默认只有填充色(黑色),没有描边色

(2)SVG图形的样式可以用元素属性声明，也可以用css 形式来声明，但是css声明只能使用svg专用样式，不能用css样式，如边框设置 stroke而不border

(3)图形可以用js对属性赋值,但不能使用HTML DOM形式，只能用核心 DOM操作

r3.x  r3.width =   无效

r3.setAttribute("x",10);

(4)动态添加svg图形可以有两种方式

 #HTML字符中拼接

  var html = "<rect></rect>";

  svg.innerHTML = html;

 #创建元素 

  var rect = document.createElementNS(

   "http://www.w3.org/2000/svg",

   标签名);

  svg.appendChild(rect);

   3.3: h5新特性---SVG绘图--圆形   

   <circle r="" cx="" cy="" fill="" fill-opacity="" ...>

    练习1:在svg画布上填充五个圆形

     四个角中央一个

    练习2:在 svg画布上随机绘制30个实心圆形,

     位置随机,填充颜色随机,透明度随机

     点击某个圆形后，它慢慢变大、变淡直至消至消失

     从DOM树删除