HTML5新特性--svg-echarts(重点)-拖动API-WebWorker

一、html5新特性--svg--(折线/渐变特效对象/滤镜)

  #折线:多个坐标点组件一条折线

  <polyline points="50,50 70,55 60,66 " stroke="" stroke-width="">

  </polyline>

  #points 一组坐标点

  #渐变特效对象:一种特效样式(从一种颜色慢慢过滤另一种颜色效果)

  #渐变特效对象:(1)创建渐变对象 <defs> (2)在指定图形应用

  <defs>

    <linearGradient id="g3" x1="" y1="" x2="" y2="">

     <stop offset="" stop-color="" />

    </linearGradient>

  </defs>

  <rect fill="url(#g3)"></rect>

  <ANY fill="url(#g3)"  stroke="url(#g3)"></ANY>

  x1="" y1=""  起点坐标 (1)写像素0,0  500,0 (2)写百分0% 0% 100%

  x2="" y2=""  终点坐标

  stop       颜色点 

  offset      偏移量 0% 30%  100%

  stop-color  颜色点

二、HTML5新特性--svg--(滤镜)

 #滤镜也是一种特效对象:模糊滤镜

 <defs>

    <filter id="f3">

      <feGaussianBlur stdDeviation="数字" />

    </filter>

 </defs>

 #数字模糊级别 1~10   (5)

 <ANY filter="url(#f3)"></ANY>

 https://developer.mozilla.org/zh-CN/docs/Web/SVG/Element/filter

三、HTML5新特性---echarts(重点)

 百度提供第三方绘图库:

 #如果需要快速创建功能简单外观复杂图像考虑echarts

 #何时使用第三方库绘制图形

   (1)外观精美

   (2)图形复杂

 #何时自己完成图形

   (1)功能复杂【特效/游戏】

四、html5新特性---echarts(重点)--使用

  (1)下载

  https://www.echartsjs.com/zh/download.html

  (2)创建容器(显示图形)

  <div id="main" style="500px;height:400px;">

    <!--canvas>第三方库</canvas-->

  </div>

  (3)加载echarts.min.js   #此文件中有 echarts全局对象

  (4)程序：获取容器  var main = document.getElementById("main")

  (5)创建echarts对象 var mychart = echarts.init(main);

  (6)创建options选项 var option = {};  #只需要将数据添加option

  (7)将options添加 echarts 对象 mychart.setOption(option)

  

  #柱状统计图

  var option = {

    title:{text:"入门示例柱状统计图"}

    xAxis:{data:["衬衫","裤子","袜子","雪纺衫"]},

    yAxis:{},  #动态变化由下方数据源指定

    series:[{type:"bar",data:[100,100,10,1]}]

  }

  #title: 顶部标签

  #xAxis: x轴数据

  # series 数据源

  #type:"bar"

  绘制图像类型: bar 柱状统计图 line 折线

               pie 饼图       gauge 仪表图 ...

五、html5新特性---拖放API（网页）

 #PC端项目--拖动上传图片   (#拖动上传图片视频)

 #移动端项目--（自拍/ 相册）

 Drag & Drop 拖动和释放

 -拖动源对象(会动)-触发三个事件

  dragstart 拖动开始

  drag     拖动中

  dragend  拖动结束

  整个过程:dragstart*1+drag*n+dragend*1

 -拖动目标对象(不动)-触发四个事件(!!)

  dragenter  拖动进入

  dragover   拖动悬停 #默认行为:悬停事件结束后立即触发离开

                      #阻止事件默认行为

  dragleave  拖动离开

  drop      拖动释放

  整个过程1:dragenter*1+dragover*n+dragleave*1

  整个过程2:dragenter*1+dragover*n+drop*1

六、

html5新特性---Web Worker---理论多代码少(3行)

  程序:指可以被CPU执行代码,程序存储在磁盘上 1.html 2.js

  进程:将程序调用内存中并且分配指定空间,在内存中的程序

       称为进程

  线程:进程内部是由多个线程组件（内存）

  

  chrome浏览器

  一个chrome浏览器进程内部至少有6个线程负责向服务器

  发送请求获取资源(资源{网页/图片/视频/..}   请求线程)

  一个线程负责绘制所有资源并且执行js程序  UI主线

  <button>111</button>

  <script src="1.js"></script>

  <button>222</button>

  问题:用户很长时间看不到网页内容

  解决方案:创建新线程帮助UI主线程执行耗时 js任务

           UI主线程负责绘制网页

           创建Worker对象

  标准语法:

  var w = new Worker("js任务路径");

  #创建Worker对象

  #创建新线程执行js任务

 

  #Worker程序实现数据传递

  #UI线程(html)将数据发送Worker(05.js)线程

   UI     发数据

   var w = new Worker("js/05.js");

   w.postMessage("123")

   Worker 收数据

   onmessage = function(event){event.data}

  #Worker(05.js)线程将数据发送UI(html)线程