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樹刪除