目錄

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

? ? ? ? ? ? ? ? ? ? ? ? ? ?這樣就實現了主線程和子線程的相互發送信息。