目录

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

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