canvas和svg

　　<canvas> 看起來和 <img> 元素很相像，惟一的不一樣就是它並無 src 和 alt 屬性。實際上，<canvas> 標籤只有兩個屬性—— width和height。這些都是可選的，而且一樣利用 DOMproperties 來設置。當沒有設置寬度和高度的時候，canvas會初始化寬度爲300像素和高度爲150像素。該元素可使用CSS來定義大小，但在繪製時圖像會伸縮以適應它的框架尺寸：若是CSS的尺寸與初始畫布的比例不一致，它會出現扭曲。

id屬性並非<canvas>元素所特有的，而是每個HTML元素都默認具備的屬性（好比class屬性）。給每一個標籤都加上一個id屬性是個好主意，由於這樣你就能在咱們的腳本中很容易的找到它。

 

<canvas>元素能夠像任何一個普通的圖像同樣（有margin，border，background等等屬性）被設計。然而，這些樣式不會影響在canvas中的實際圖像。咱們將會在一個專門的章節裏看到這是如何解決的。當開始時沒有爲canvas規定樣式規則，其將會徹底透明。

替換內容節

<canvas>元素與<img>標籤的不一樣之處在於，就像<video>，<audio>，或者 <picture>元素同樣，很容易定義一些替代內容。因爲某些較老的瀏覽器（尤爲是IE9以前的IE瀏覽器）或者文本瀏覽器不支持HTML元素"canvas"，在這些瀏覽器上你應該老是能展現替代內容。

 

這很是簡單：咱們只是在<canvas>標籤中提供了替換內容。不支持<canvas>的瀏覽器將會忽略容器並在其中渲染後備內容。而支持<canvas>的瀏覽器將會忽略在容器中包含的內容，而且只是正常渲染canvas。

 </canvas> 標籤不可省節

與 <img> 元素不一樣，<canvas> 元素須要結束標籤(</canvas>)。若是結束標籤不存在，則文檔的其他部分會被認爲是替代內容，將不會顯示出來。

若是不須要替代內容，一個簡單的 <canvas id="foo" ...></canvas> 在全部支持canvas的瀏覽器中都是徹底兼容的。

渲染上下文（The rendering context）節

<canvas> 元素創造了一個固定大小的畫布，它公開了一個或多個渲染上下文，其能夠用來繪製和處理要展現的內容。咱們將會將注意力放在2D渲染上下文中。其餘種類的上下文也許提供了不一樣種類的渲染方式；好比， WebGL 使用了基於OpenGL ES的3D上下文 ("experimental-webgl") 。

canvas起初是空白的。爲了展現，首先腳本須要找到渲染上下文，而後在它的上面繪製。<canvas> 元素有一個叫作 getContext() 的方法，這個方法是用來得到渲染上下文和它的繪畫功能。getContext()只有一個參數，上下文的格式。對於2D圖像而言，如本教程，你可使用 CanvasRenderingContext2D。

檢查支持性節

替換內容是用於在不支持 <canvas> 標籤的瀏覽器中展現的。經過簡單的測試getContext()方

連接：https://www.nowcoder.com/questionTerminal/c5982f8b70ba427aab804643e12ab44d?orderByHotValue=1&page=1&onlyReference=false
來源：牛客網

calable Vector Graphics (簡稱SVG)，「可升級 矢量圖形」的意思，它是由 W3C 制定的基於 可擴展標記語言 (XML) 來描述二維矢量圖型的一個開放標準。 SVG 嚴格聽從 XML 語法，並用文本格式的描述性語言來描述圖像內容，所以是一種和圖像分辨率無關的矢量圖形格式,它具備如下優勢：

· 圖像文件可讀，易於修改和編輯

· 與現有技術能夠互動融合。例如， SVG 技術自己的動態部分(包括時序控制和動畫(就是基於 SMIL 標準。另外， SVG 文件還可嵌入 JavaScript (嚴格的說應該是 ECMAScript )腳原本控制 SVG 對象

· SVG圖形格式能夠方便的創建文字索引，從而實現基於內容的 圖像搜索

· SVG圖形格式支持多種 濾鏡和特殊效果，在不改變圖像內容的前提下能夠實現 位圖格式中相似文字陰影的效果

· SVG圖形格式能夠用來動態生成圖形。例如，可用SVG動態生成具備交互功能的地圖，嵌入網頁中，並顯示給終端用戶

· SVG面臨的主要問題一個是如何和已經佔有重要市場份額的矢量圖形格式 Flash 如何競爭的問題，另外一個問題就是SVG的本地運行環境的下廠家支持程度。

Canvas 畫布  位圖

1.      不要在style中給canvas設置寬高 會有位移差

2.       

fillRect()  繪製一個填充的方塊  默認顏色是黑色

strokeRect() 繪製帶邊框的方塊

繪製線條

moveTo() 繪製線段的起點

lineTo() 繪製線段的領點

每一個線條只能有一個moveTo能夠有多個lineTo

Stroke()繪製線段

beginPath()

ClosePath()  兩者同時出現  將繪製路徑閉合

（起始點 結尾點首尾相連）

Rect() 繪製方塊

clearRect(0,0,width,height)清除畫布

Can.save()

Can.restore()   兩者成對出現 中間的屬性樣式隻影響內部 不影響外部

畫圓

200，200 是圓心座標

50 是半徑

0是起始弧度  Math.PI是結束弧度

True 是逆時針方向

注意 角度有正負之分  順時針轉的角度是正的 逆時針轉的角度是負的

 

 

貝塞爾曲線 瞭解

 

畫布的平移和旋轉

平移translate 畫布大小位置不變  起始座標 變了

至關於座標平移

Rotate()

畫布的旋轉都是以00起始點爲中心點旋轉

Scale(0.5,0.5)

畫布的縮放  就是將畫布向後移動 跟人的視距就變遠了 近大遠小

畫布中插入圖片

插入字體

200,200字體的起始點 默認在起始點在字體的左下角

Svg  矢量圖

Svg繪製矢量圖canvas用於繪製位圖

Svg使用xml格式繪製圖形

Svg要有一個根節點 叫svg標籤 就至關於html

Svg若是不設置大小 默認佔用面積300*150

定義矩形

Rect 標籤 屬性有 width height x y rx ry fill stroke-width stroke style

Style=」fill-opacity:0.2;stroke-opacity:0.5;opacity:0.5」

Fill-opacity和opacity的區別 fill-opacity只改變填充色的透明度 opacity改變fill和stroke的透明度都改變

 

定義圓

Circle cx cy 定義圓的圓心座標  r定義半徑

 

定義橢圓

Ellipse cx cy 定義圓心座標  rx 定義x軸半徑 ry定義y軸半徑

定義直線

Line  x1 y1 定義起始座標 x2 y2 定義結束座標 必須結合stroke繪製

定義多邊形

Polygon points=」」 寫多變形角的座標  fill-rule=」」 ???

 

定義折線

Polyline  points=」」 折點的座標

 

定義路徑

Path d=」M」

M是起點座標 L是相鄰點座標 Z讓路徑構成閉合迴路

H表明水平的線條 默認y軸上的值同樣

V 表明垂直的線條 默認x軸上的值同樣

A 後面跟七個值

Transfrom 轉換 svg中的一個屬性 translate  rotate scale

平移 旋轉 都是以起點0 0（svg的左上角）點爲參考點 而css3中以元素的中心點爲參考點

G 用於將相關元素進行組合

G身上的屬性 子元素都會繼承 可是g上的屬性都必須是顯現屬性 不是svg元素私有的 好比 g 上的圓心座標不行

Text 用於定義文本 x y xy的值在字體的左下角

Text-anchor=」middle」 讓字體居中

Image 繪製圖片

Use用於複製元素 x y

Xy 是相對於原始的元素的座標位置 不是相對svg的00點座標

Animate

寫在須要動畫元素的中間

attributeName  form to dur repeatCount=」indefinite」(無限次)

echarts

引入文件後 console.log(echarts) //echarts object

 

 

十大圖片

柱狀圖（bar） 折線圖（line） 餅圖（pie） 散點圖(scatter) 地圖(map) 氣泡圖(bubble)

基本名字

Grid 座標系

Title: 圖標的標題 是一個object

Legend 圖例組件

Xaxis x軸座標

Yaxis y軸座標

Series 系列列表 []

 

 

 

 

 

Svg

1.      path   M是是起點 L是相鄰點 後面都是兩個值

H是橫向繪製 後面跟一個值 默認y軸上的值同樣 V是垂直繪製 後面跟一個值 默認x軸上的值同樣

Z表明構造一個閉合迴路