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树删除