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="width: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)线程