html5 svg的使用_html svg图标-CSDN博客

本文链接：https://blog.csdn.net/m0_47045804/article/details/139175234

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>

默认是fill填充效果可以通过fill属性修改填充颜色

如果只想描边那么fill='none' ; stroke-width=" " 描边宽度; stroke=" " 描边颜色

2.绘制圆

</svg>

3.绘制椭圆

</svg>

4.绘制多点线

<polyline points="50,50 275,147 235,399 127,25"

fill="none" stroke-width="3" stroke="hotpink"></polyline>

</svg>

5.绘制多点形状

</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>

</defs>

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() 方法。

这样就实现了主线程和子线程的相互发送信息。