目录
01 svg的基本使用
02 svg绘图
03 进程和线程
01 svg的基本使用
svg和canvas的区别:
canvas: 1.canvas作为一个容器只有一个dom元素 ,内部元素无法使用dom操作
(canvas不能展开然后选择不到 svg查看元素能选中因为是通过标签控制的)
2.canvas 是配合js完成各种绘制效果
3.canvas 是位图 依赖像素 放大会变得模糊
svg: 1.svg虽然也是一个容器, 到那时内部有各种各样的dom元素操作
2.svg是通过各种标签进行绘制的内容(rect circle)
3.svg是矢量图,不依赖像素 (放大缩小不会失真)
02 svg绘图
1.绘制矩形
<svg width="400" height="400" style="border:1px solid #000">
<rect x="50" y="50" width="200" height="200" fill="red"></rect>
</svg>
默认是fill填充效果 可以通过fill属性 修改填充颜色
如果只想描边 那么fill='none' ; stroke-width=" " 描边宽度; stroke=" " 描边颜色
2.绘制圆
<svg width="400" height="400" style="border:1px solid #000">
<circle cx="200" cy="200" r="100" fill="orange"></circle>
</svg>
3.绘制椭圆
<svg width="400" height="400" style="border:1px solid #000">
<ellipse cx="200" cy="200" rx="200" ry="20" ></ellipse>
</svg>
4.绘制多点线
<svg width="400" height="400" style="border:1px solid #000">
<polyline points="50,50 275,147 235,399 127,25"
fill="none" stroke-width="3" stroke="hotpink"></polyline>
</svg>
5.绘制多点形状
<svg width="400" height="400" style="border:1px solid #000">
<polygon points="100,100 200,100 200,300 150,400 100,300"></polygon>
</svg>
6.svg渐变的使用
线性渐变:
语法：<linearGradient></linearGradient>
属性：
id，定义了渐变的唯一名称
x1，渐变的起始x位置,百分比
y1，渐变的起始y位置,百分比
x2，渐变的结束x位置,百分比
y2，渐变的结束y位置,百分比
颜色用单标签stop设置，如：
offset：定义渐变颜色的开始和结束位置，其值是相对位置的百分比
stop-color：用于定义渐变的颜色
例:
径向渐变:
语法：<radialGradient></radialGradient>双标签
属性有：
id，定义了渐变的唯一名称
cx，定义最外面圆x
cy，定义最外面圆x
r，定义最外面圆半径
fx，定义了最里面的圆
fy，定义了最里面的圆
颜色也是使用stop实现
例:
7. svg的预定义标签
标签分组: <g id='id值'></g>
分组标签的使用:<use xlink:href='#id值'></use>
8.svg 高斯模糊
<defs>
<filter id=“a”>
<feGaussianBlur stdDeviation=“8”></feGaussianBlur>
</filter>
</defs>
<rect x="100" y="100" width="200" height="200" filter="url(#a)"></rect>
stdDeviation 表示模糊度 值越大越模糊
此处引入高斯模糊用的是filter不能是fill填充效果
9.svg动态创建
通过JS动态创建SVG图形
1.获取svg对象
2.动态创建一个子元素(并且设置子元素的属性)
3.添加到父元素里面去
创建的方法:
Document.createElementNS(“http://www.w3.org/2000/svg”,”标签名”)
通过返回值的对象.setAttribute()方法设置属性
然后通过appendChild()把新创建的元素放到父元素里面
可以通过点击事件创建元素
Tips:event.offsetX可以获取鼠标在盒子中的位置
例:
10.拖拽
拖放（Drag 和 Drop）是很常见的特性。它指的是您抓取某物并拖入不同的位置。
拖放是 HTML5 标准的组成部分：任何元素都是可拖放的。
为了把一个元素设置为可拖放，请把 draggable 属性设置为 true：
<img draggable="true">
03 进程和线程
1.进程和线程的概述
进程: 正在运行的程序
线程: 进程中具体的执行任务
cpu在进程间高速切换实际上就是在每一个进程里面的线程上面切换,
所以线程是cpu执行的最基本的单元.
js 是单线程程序:
因为js运行环境硬件不够强大
js这个单线程负责的内容:
页面更新 js代码执行 加载页面 请求数据...
2.worker线程的使用
一般情况下用不到开子线程
有耗时操作或者长轮询操作时会开启子线程
开启线程的语法:
var worker = new Worker('js文件路径')
如何通信:
子线程给主线程通信:
this(子线程对象).postmessage({
自定义键值对
})
在主线程里面通过new出来的worker对象
worker.onmessage=function(e){
通过形参接收子线程传过来的数据
}
主线程给子线程通信:
1. 在主线程中创建两个Handler对象 handler 和 handler2,
(图中是threadHandler),并直接初始化 handler,而handler2 不初始化。
2. 使用 HandlerThread 创建一个子线程 thread ，并启动 thread 。
3. 初始化 handler2（使用 thread 的 getLooper()作为参数），
这样一来handler2就是子线程的 Handler 对象。
4. 重写 handler 和 handler2 的 handleMessage()方法，
在里面创建Message对象，并使用对方的
sendMessageDelayed(message,1000);方法发送消息。
5. 定义一个Button，定义点击事件，由点击事件触发如上交互的操作。
如上操作中，第4点是核心，也就是两个 Handler 各自重写 handleMessage()，
方法里面却是使用对方的 sendMessage() 方法。
这样就实现了主线程和子线程的相互发送信息。
