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)线程
