1、了解Canvas

?什么是Canvas
----? Canvas 最初由Apple于2004 年引入，用于Mac OS X WebKit組件，為儀表板小部件和Safari瀏覽器等應(yīng)用程序提供支持。后來，它被Gecko內(nèi)核的瀏覽器（尤其是Mozilla Firefox），Opera和Chrome實(shí)現(xiàn)，并被網(wǎng)頁超文本應(yīng)用技術(shù)工作小組提議為下一代的網(wǎng)絡(luò)技術(shù)的標(biāo)準(zhǔn)元素（HTML5新增元素）。
----? Canvas提供了非常多的JavaScript繪圖API（比如：繪制路徑、矩形、圓、文本和圖像等方法），與元素可以繪制各種2D圖形。
----? Canvas API 主要聚焦于2D 圖形。當(dāng)然也可以使用元素對(duì)象的WebGL API 來繪制2D 和3D 圖形。
?Canvas的應(yīng)用場景
----? 可以用于動(dòng)畫、游戲畫面、數(shù)據(jù)可視化、圖片編輯以及實(shí)時(shí)視頻處理等方面。
?Canvas 瀏覽器兼容性

2、Canvas 優(yōu)缺點(diǎn)

?Canvas 優(yōu)點(diǎn)：
----? Canvas提供的功能更原始，適合像素處理，動(dòng)態(tài)渲染和數(shù)據(jù)量大的繪制，如：圖片編輯、熱力圖、炫光尾跡特效等。
----? Canvas非常適合圖像密集型的游戲開發(fā)，適合頻繁重繪許多的對(duì)象。
----? Canvas能夠以.png 或.jpg 格式保存結(jié)果圖像，適合對(duì)圖片進(jìn)行像素級(jí)的處理。
?Canvas 缺點(diǎn)：
----? 在移動(dòng)端可以能會(huì)因?yàn)镃anvas數(shù)量多，而導(dǎo)致內(nèi)存占用超出了手機(jī)的承受能力，導(dǎo)致瀏覽器崩潰。
----? Canvas 繪圖只能通過JavaScript腳本操作（allinjs）。
----? Canvas 是由一個(gè)個(gè)像素點(diǎn)構(gòu)成的圖形，放大會(huì)使圖形變得顆粒狀和像素化，導(dǎo)致模糊。

3、初體驗(yàn)Canvas

? 使用Canvas的注意事項(xiàng)：
----? 和 元素很相像，唯一的不同就是它并沒有src 和alt 屬性。
----? 標(biāo)簽只有兩個(gè)屬性——width和height(單位默認(rèn)為px)。當(dāng)沒有設(shè)置寬度和高度時(shí)，canvas 會(huì)初始化寬為300px 和高為150px。
----?與 元素不同， 元素必須需要結(jié)束標(biāo)簽()。如結(jié)束標(biāo)簽不存在，則文檔其余部分會(huì)被認(rèn)為是替代內(nèi)容，將不會(huì)顯示出來。
----?測試canvas.getContext() 方法的存在，可以檢查瀏覽器是否支持Canvas。
?初體驗(yàn)Canvas
----? Canvas通用模板
----? Canvas繪制正方形

4、Canvas Grid和坐標(biāo)空間

?在開始畫圖之前，我們需要了解一下Canvas網(wǎng)格（canvas grid）和坐標(biāo)系。
?Canvas Grid 或坐標(biāo)空間
----?假如，HTML 模板中有個(gè)寬150px, 高150px 的元素。元素默認(rèn)被網(wǎng)格所覆蓋。
----?通常來說網(wǎng)格中的一個(gè)單元相當(dāng)于canvas 元素中的一像素。
----?該網(wǎng)格的原點(diǎn)位于坐標(biāo)(0,0) 的左上角。所有元素都相對(duì)于該原點(diǎn)放置。
----?網(wǎng)格也可以理解為坐標(biāo)空間（坐標(biāo)系），坐標(biāo)原點(diǎn)位于canvas元素的左上角，被稱為初始坐標(biāo)系；如右圖中藍(lán)色正方形，左上角的坐標(biāo)為距離左邊x 像素，距離上邊y像素，坐標(biāo)為（x,y）
----?網(wǎng)格或坐標(biāo)空間是可以變換的，后面會(huì)講如何將原點(diǎn)轉(zhuǎn)換到不同的位置，旋轉(zhuǎn)網(wǎng)格甚至縮放它。
注意：移動(dòng)了原點(diǎn)后，默認(rèn)所有后續(xù)變換都將基于新坐標(biāo)系的變換。

5、繪制矩形(Rectangle)

?Canvas支持兩種方式來繪制矩形：矩形方法和路徑方法。
----? 路徑是通過不同顏色和寬度的線段或曲線相連形成的不同形狀的點(diǎn)的集合。
----? 除了矩形，其他的圖形都是通過一條或者多條路徑組合而成的。
----? 通常我們會(huì)通過眾多的路徑來繪制復(fù)雜的圖形。
?Canvas 繪圖的矩形方法：
----? fillRect(x, y, width, height)：繪制一個(gè)填充的矩形
----? strokeRect(x, y, width, height)：繪制一個(gè)矩形的邊框
----? clearRect(x, y, width, height)：清除指定矩形區(qū)域，讓清除部分完全透明。
?方法參數(shù)：
----? 上面的方法都包含了相同的參數(shù)。
----? x 與y 指定了在canvas畫布上所繪制矩形的左上角（相對(duì)于原點(diǎn)）的坐標(biāo)（不支持undefined）。
----? width 和height 設(shè)置矩形的尺寸。

6、認(rèn)識(shí)路徑

? 什么是路徑？
----? 圖形的基本元素是路徑。路徑是通過不同顏色和寬度的線段或曲線相連形成的不同形狀的點(diǎn)的集合。
----? 路徑是可由很多子路徑構(gòu)成，這些子路徑都是在一個(gè)列表中，列表中所有子路徑（線、弧形等）將構(gòu)成圖形。
----? 一個(gè)路徑，甚至一個(gè)子路徑，通常都是閉合的。
? 使用路徑繪制圖形的步驟：
----? 1.首先需要?jiǎng)?chuàng)建路徑起始點(diǎn)（beginPath）。
----? 2.然后使用畫圖命令去畫出路徑(arc、lineTo)。
----? 3.之后把路徑閉合(closePath,不是必須)。
----? 4.一旦路徑生成，就能通過描邊(stroke)或填充路徑區(qū)域(fill)來渲染圖形。
? 以下是繪制路徑時(shí)，所要用到的函數(shù)
----? beginPath()：新建一條路徑，生成之后，圖形繪制命令被指向到新的路徑上繪圖，不會(huì)關(guān)聯(lián)到舊的路徑。
----? closePath()：閉合路徑之后圖形繪制命令又重新指向到beginPath之前的上下文中。
----? stroke()：通過線條來繪制圖形輪廓/描邊（針對(duì)當(dāng)前路徑圖形）。
----? fill()：通過填充路徑的內(nèi)容區(qū)域生成實(shí)心的圖形（針對(duì)當(dāng)前路徑圖形）。

7、路徑-繪制直線

? 移動(dòng)畫筆（moveTo）方法
----? moveTo方法是不能畫出任何東西，但是它也是路徑列表的一部分
----? moveTo可以想象為在紙上作業(yè)，一支鋼筆或者鉛筆的筆尖從一個(gè)點(diǎn)到另一個(gè)點(diǎn)的移動(dòng)過程。
----? moveTo(x, y)：將筆移動(dòng)到指定的坐標(biāo)x 、y 上。
----? 當(dāng)canvas 初始化或者beginPath()調(diào)用后，我們通常會(huì)使用moveTo(x,y)函數(shù)設(shè)置起點(diǎn)。
----? 使用moveTo函數(shù)能夠繪制一些不連續(xù)的路徑。

? 繪制直線（lineTo）方法
----? lineTo(x, y)：繪制一條從當(dāng)前位置到指定(x ，y)位置的直線。
----? 該方法有兩個(gè)參數(shù)(x ，y)代表坐標(biāo)系中直線結(jié)束的點(diǎn)。
----? 開始點(diǎn)和之前的繪制路徑有關(guān)，之前路徑的結(jié)束點(diǎn)就是接下來的開始點(diǎn)。
----? 當(dāng)然開始點(diǎn)也可以通過moveTo(x,y)函數(shù)改變。
? 繪制一條直線
----? 第一步：調(diào)用beginPath() 來生成路徑。本質(zhì)上，路徑是由很多子路徑（線、弧形、等）構(gòu)成。
----? 第二步：調(diào)用moveTo、lineTo函數(shù)來繪制路徑（路徑可以是連續(xù)也可以不連續(xù)）。
----? 第三步：閉合路徑closePath()，雖然不是必需的，但是通常都是要閉合路徑。
----? 第四步：調(diào)用stroke()函數(shù)來給直線描邊。

8、路徑-繪制三角形(Triangle)

? 繪制一個(gè)三角形步驟
----? 第一步：調(diào)用beginPath() 來生成路徑。
----? 第二步：調(diào)用moveTo()、lineTo()函數(shù)來繪制路徑。
----? 第三步：閉合路徑closePath()，不是必需的。
1）closePath()方法會(huì)通過繪制一條從當(dāng)前點(diǎn)到開始點(diǎn)的直線來閉合圖形。
2）如果圖形是已經(jīng)閉合了的，即當(dāng)前點(diǎn)為開始點(diǎn)，該函數(shù)什么也不做。
----? 第四步：調(diào)用stroke()函數(shù)來給線描邊，或者調(diào)用fill()函數(shù)來填充（使用填充fill 時(shí)，路徑會(huì)自動(dòng)閉合，而stroke不會(huì)）。

9、路徑-繪制圓弧（Arc）、圓(Circle)

? 繪制圓弧或者圓，使用arc()方法。
----? arc(x, y, radius, startAngle, endAngle, anticlockwise)，該方法有六個(gè)參數(shù)：
1） x、y：為繪制圓弧所在圓上的圓心坐標(biāo)。
2） radius：為圓弧半徑。
3） startAngle、endAngle：該參數(shù)用弧度定義了開始以及結(jié)束的弧度。這些都是以x 軸為基準(zhǔn)。
4） anticlockwise：為一個(gè)布爾值。為true ，是逆時(shí)針方向，為false，是順時(shí)針方向，默認(rèn)為false。
? 計(jì)算弧度
----? arc() 函數(shù)中表示角的單位是弧度，不是角度。
----? 角度與弧度的JS表達(dá)式：弧度=( Math.PI / 180 ) * 角度，即1角度=Math.PI/180個(gè)弧度
1） 比如：旋轉(zhuǎn)90°：Math.PI / 2；旋轉(zhuǎn)180°：Math.PI ；旋轉(zhuǎn)360°：Math.PI * 2；旋轉(zhuǎn)-90°：-Math.PI / 2；
? 繪制一個(gè)圓弧的步驟
----? 第一步：調(diào)用beginPath() 來生成路徑。
----? 第二步：調(diào)用arc()函數(shù)來繪制圓弧。
----? 第三步：閉合路徑closePath()，不是必需的。
----? 第四步：調(diào)用stroke()函數(shù)來描邊，或者調(diào)用fill()函數(shù)來填充（使用填充fill 時(shí)，路徑會(huì)自動(dòng)閉合）

10、路徑-矩形（Rectangle）

? 繪制矩形的另一個(gè)方法：
----? 調(diào)用rect() 函數(shù)繪制，即將一個(gè)矩形路徑增加到當(dāng)前路徑上
----? rect(x, y, width, height)
----? 繪制一個(gè)左上角坐標(biāo)為（x,y），寬高為width 以及height 的矩形。
? 注意：
----? 當(dāng)該方法執(zhí)行的時(shí)候，moveTo(x,y) 方法自動(dòng)設(shè)置坐標(biāo)參數(shù)（0,0）。也就是說，當(dāng)前筆觸自動(dòng)重置回默認(rèn)坐標(biāo)。

11、路徑-繪制圓?。ˋrc）、圓(Circle)

? 繪制圓弧或者圓，使用arc()方法。
----? arc(x, y, radius, startAngle, endAngle, anticlockwise)，該方法有六個(gè)參數(shù)：
1） x、y：為繪制圓弧所在圓上的圓心坐標(biāo)。
2） radius：為圓弧半徑。
3） startAngle、endAngle：該參數(shù)用弧度定義了開始以及結(jié)束的弧度。這些都是以x 軸為基準(zhǔn)。
4） anticlockwise：為一個(gè)布爾值。為true ，是逆時(shí)針方向，為false，是順時(shí)針方向，默認(rèn)為false。
? 計(jì)算弧度
----? arc() 函數(shù)中表示角的單位是弧度，不是角度。
----? 角度與弧度的JS表達(dá)式：弧度=( Math.PI / 180 ) * 角度，即1角度=Math.PI/180個(gè)弧度
----? 比如：旋轉(zhuǎn)90°：Math.PI / 2；旋轉(zhuǎn)180°：Math.PI ；旋轉(zhuǎn)360°：Math.PI * 2；旋轉(zhuǎn)-90°：-Math.PI / 2；
? 繪制一個(gè)圓弧的步驟
----? 第一步：調(diào)用beginPath() 來生成路徑。
----? 第二步：調(diào)用arc()函數(shù)來繪制圓弧。
----? 第三步：閉合路徑closePath()，不是必需的。
----? 第四步：調(diào)用stroke()函數(shù)來描邊，或者調(diào)用fill()函數(shù)來填充（使用填充fill 時(shí)，路徑會(huì)自動(dòng)閉合）。

12、路徑-矩形（Rectangle）

? 繪制矩形的另一個(gè)方法：
----? 調(diào)用rect() 函數(shù)繪制，即將一個(gè)矩形路徑增加到當(dāng)前路徑上
----? rect(x, y, width, height)
----? 繪制一個(gè)左上角坐標(biāo)為（x,y），寬高為width 以及height 的矩形。
? 注意：
----? 當(dāng)該方法執(zhí)行的時(shí)候，moveTo(x,y) 方法自動(dòng)設(shè)置坐標(biāo)參數(shù)（0,0）。也就是說，當(dāng)前筆觸自動(dòng)重置回默認(rèn)坐標(biāo)。

13、色彩Colors

? 前面已經(jīng)學(xué)過了很多繪制圖形的方法。如果我們想要給圖形上色，有兩個(gè)重要的屬性可以做到：
----? fillStyle = color：設(shè)置圖形的填充顏色，需在fill()函數(shù)前調(diào)用。
----? strokeStyle = color：設(shè)置圖形輪廓的顏色，需在stroke()函數(shù)前調(diào)用。

? color顏色
----? color 可以是表示CSS 顏色值的字符串，支持：關(guān)鍵字、十六進(jìn)制、rgb、rgba格式。
----? 默認(rèn)情況下，線條和填充顏色都是黑色（CSS 顏色值#000000）。
? 注意
----? 一旦設(shè)置了strokeStyle 或者fillStyle 的值，那么這個(gè)新值就會(huì)成為新繪制的圖形的默認(rèn)值。
----? 如果你要給圖形上不同的顏色，你需要重新設(shè)置fillStyle 或strokeStyle 的值。
? 額外補(bǔ)充
----? fill() 函數(shù)是圖形填充，fillStyle屬性是設(shè)置填充色
----? stroke() 函數(shù)是圖形描邊，strokeStyle屬性是設(shè)置描邊色

14、透明度Transparent

? 除了可以繪制實(shí)色圖形，我們還可以用canvas 來繪制半透明的圖形。
? 方式一：strokeStyle 和fillStyle屬性結(jié)合RGBA：

? 方式二：globalAlpha 屬性
----? globalAlpha = 0~1
? 這個(gè)屬性影響到canvas 里所有圖形的透明度
? 有效的值范圍是0.0（完全透明）到1.0（完全不透明），默認(rèn)是1.0。

15、線型Line styles

? 調(diào)用lineTo()函數(shù)繪制的線條，是可以通過一系列屬性來設(shè)置線的樣式。
----? lineWidth = value：設(shè)置線條寬度。
----? lineCap = type：設(shè)置線條末端樣式。
----? lineJoin = type：設(shè)定線條與線條間接合處的樣式。
----? …
? lineWidth
----? 設(shè)置線條寬度的屬性值必須為正數(shù)。默認(rèn)值是1.0px，不需單位。（零、負(fù)數(shù)、Infinity和NaN值將被忽略）
----? 線寬是指給定路徑的中心到兩邊的粗細(xì)。換句話說就是在路徑的兩邊各繪制線寬的一半。
----? 如果你想要繪制一條從(3,1) 到(3,5)，寬度是1.0 的線條，你會(huì)得到像第二幅圖一樣的結(jié)果。
----? 路徑的兩邊個(gè)各延伸半個(gè)像素填充并渲染出1像素的線條（深藍(lán)色部分）
----? 兩邊剩下的半個(gè)像素又會(huì)以實(shí)際畫筆顏色一半色調(diào)來填充（淺藍(lán)部分）
----? 實(shí)際畫出線條的區(qū)域?yàn)椋\藍(lán)和深藍(lán)的部分），填充色大于1像素了，這就是為何寬度為1.0 的線經(jīng)常并不準(zhǔn)確的原因。
----? 要解決這個(gè)問題，必須對(duì)路徑精確的控制。如，1px的線條會(huì)在路徑兩邊各延伸半像素，那么像第三幅圖那樣繪制從(3.5 ,1) 到(3.5, 5) 的線條，其邊緣正好落在像素邊界，填充出來就是準(zhǔn)確的寬為1.0 的線條。

? lineCap：屬性的值決定了線段端點(diǎn)顯示的樣子。它可以為下面的三種的其中之一：
----? butt 截?cái)?，默認(rèn)是butt。
----? round 圓形
----? square 正方形
? lineJoin：屬性的值決定了圖形中線段連接處所顯示的樣子。它可以是這三種之一：
----? round 圓形
----? bevel 斜角
----? miter 斜槽規(guī)，默認(rèn)是miter。

16、繪制文本

? canvas 提供了兩種方法來渲染文本：
----? fillText(text, x, y [, maxWidth])
----? 在(x,y) 位置，填充指定的文本
----? 繪制的最大寬度（可選）。
----? strokeText(text, x, y [, maxWidth])
----? 在(x,y) 位置，繪制文本邊框
----? 繪制的最大寬度（可選）。
? 文本的樣式（需在繪制文本前調(diào)用）
----? font = value：當(dāng)前繪制文本的樣式。這個(gè)字符串使用和CSS font 屬性相同的語法。默認(rèn)的字體是：10px sans-serif。
----? textAlign = value：文本對(duì)齊選項(xiàng)?？蛇x的值包括：start, end, left, right or center. 默認(rèn)值是start
----? textBaseline = value：基線對(duì)齊選項(xiàng)?？蛇x的值包括：top, hanging, middle, alphabetic, ideographic, bottom。
----? 默認(rèn)值是alphabetic。

17、繪制圖片

? 繪制圖片，可以使用drawImage 方法將它渲染到canvas 里。drawImage 方法有三種形態(tài)：
----? drawImage(image, x, y)
----? 其中image 是image 或者canvas 對(duì)象，x 和y 是其在目標(biāo)canvas 里的起始坐標(biāo)。
----? drawImage(image, x, y, width, height)
----? 這個(gè)方法多了2 個(gè)參數(shù)：width 和height，這兩個(gè)參數(shù)用來控制當(dāng)向canvas 畫入時(shí)應(yīng)該縮放的大小
----? drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
----? 第一個(gè)參數(shù)和其它的是相同的，都是一個(gè)圖像或者另一個(gè)canvas 的引用。其它8 個(gè)參數(shù)最好是參照右邊的圖解，前4 個(gè)是定義圖像源的切片位置和大小，后4 個(gè)則是定義切片的目標(biāo)顯示位置和大小。
? 圖片的來源，canvas 的API 可以使用下面這些類型中的一種作為圖片的源：
----? HTMLImageElement：這些圖片是由Image()函數(shù)構(gòu)造出來的，或者任何的元素。
----? HTMLVideoElement：用一個(gè)HTML 的元素作為你的圖片源，可以從視頻中抓取當(dāng)前幀作為一個(gè)圖像。
----? HTMLCanvasElement：可以使用另一個(gè) 元素作為你的圖片源。
----? …

18、Canvas繪畫狀態(tài)-保存和恢復(fù)

? Canvas繪畫狀態(tài)
----? 是當(dāng)前繪畫時(shí)所產(chǎn)生的樣式和變形的一個(gè)快照。
----? Canvas在繪畫時(shí)，會(huì)產(chǎn)生相應(yīng)的繪畫狀態(tài)，其實(shí)我們是可以將某些繪畫的狀態(tài)存儲(chǔ)在棧中來為以后復(fù)用。
----? Canvas 繪畫狀態(tài)的可以調(diào)用save 和restore 方法是用來保存和恢復(fù)，這兩個(gè)方法都沒有參數(shù)，并且它們是成對(duì)存在的。
? 保存和恢復(fù)（Canvas）繪畫狀態(tài)
----? save()：保存畫布(canvas) 的所有繪畫狀態(tài)
----? restore()：恢復(fù)畫布(canvas) 的所有繪畫狀態(tài)
? Canvas繪畫狀態(tài)包括：
----? 當(dāng)前應(yīng)用的變形（即移動(dòng)，旋轉(zhuǎn)和縮放）
----? 以及這些屬性：strokeStyle, fillStyle, globalAlpha, lineWidth, lineCap, lineJoin, miterLimit,
shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor, font, textAlign, textBaseline…
----? 當(dāng)前的裁切路徑（clipping path）

19、變形Transform

? Canvas和CSS3一樣也是支持變形，形變是一種更強(qiáng)大的方法，可以將坐標(biāo)原點(diǎn)移動(dòng)到另一點(diǎn)、形變可以對(duì)網(wǎng)格進(jìn)行旋轉(zhuǎn)和縮放。
? Canvas的形變有4種方法實(shí)現(xiàn)：
----? translate(x, y)：用來移動(dòng)canvas 和它的原點(diǎn)到一個(gè)不同的位置。
----? x 是左右偏移量，y是上下偏移量（無需要單位），如右圖所示。
----? rotate(angle)：用于以原點(diǎn)為中心旋轉(zhuǎn)canvas，即沿著z軸旋轉(zhuǎn)。
----? angle是旋轉(zhuǎn)的弧度，是順時(shí)針方向，以弧度為單位。
----? scale(x, y)：用來增減圖形在canvas 中像素?cái)?shù)目，對(duì)圖形進(jìn)行縮小或放大。
----? x 為水平縮放因子，y 為垂直縮放因子。如果比1 小，會(huì)縮小圖形，如果比1 大會(huì)放大圖形。默認(rèn)值為1，也支持負(fù)數(shù)。
----? transform(a, b, c, d, e, f)：允許對(duì)變形矩陣直接修改。這個(gè)方法是將當(dāng)前的變形矩陣乘上一個(gè)基于自身參數(shù)的矩陣。
? 注意事項(xiàng)：
----? 在做變形之前先調(diào)用save方法保存狀態(tài)是一個(gè)良好的習(xí)慣。
----? 大多數(shù)情況下，調(diào)用restore 方法比手動(dòng)恢復(fù)原先的狀態(tài)要簡單得多。
----? 如果在一個(gè)循環(huán)中做位移但沒有保存和恢復(fù)canvas狀態(tài)，很可能到最后會(huì)發(fā)現(xiàn)有些東西不見了，因?yàn)樗芸赡芤殉鯿anvas畫布以外了。
----? 形變需要在繪制圖形前調(diào)用。

20、移動(dòng)-translate

? translate方法，它用來移動(dòng)canvas 和它的原點(diǎn)到一個(gè)不同的位置。
----? translate(x, y)
----? x 是左右偏移量，y是上下偏移量（無需單位）。
? 移動(dòng)canvas 原點(diǎn)的好處
----? 如不使用translate方法，那么所有矩形默認(rèn)都將被繪制在相同的（0,0）坐標(biāo)原點(diǎn)。
----? translate方法可讓我們?nèi)我夥胖脠D形，而不需要手工一個(gè)個(gè)調(diào)整坐標(biāo)值。
? 移動(dòng)矩形案例
----? 第一步：先保存一下canvas當(dāng)前的狀態(tài)
----? 第二步：在繪制圖形前translate移動(dòng)畫布
----? 第三步：開始繪制圖形，并填充顏色

21、旋轉(zhuǎn)-rotate

? rotate方法，它用于以原點(diǎn)為中心旋轉(zhuǎn)canvas，即沿著z軸旋轉(zhuǎn)。
----? rotate(angle)
----? 只接受一個(gè)參數(shù)：旋轉(zhuǎn)的角度(angle)，它是順時(shí)針方向，以弧度為單位的值。
----? 角度與弧度的JS表達(dá)式：弧度=( Math.PI / 180 ) * 角度，即1角度=Math.PI/180個(gè)弧度。
----? 比如：旋轉(zhuǎn)90°：Math.PI / 2；旋轉(zhuǎn)180°：Math.PI ；旋轉(zhuǎn)360°：Math.PI * 2；旋轉(zhuǎn)-90°：-Math.PI / 2；
----? 旋轉(zhuǎn)的中心點(diǎn)始終是canvas 的原坐標(biāo)點(diǎn)，如果要改變它，我們需要用到translate方法。

? 旋轉(zhuǎn)案例
----? 第一步：先保存一下Canvas當(dāng)前的狀態(tài)，并確定旋轉(zhuǎn)原點(diǎn)
----? 第二步：在繪制圖形前旋轉(zhuǎn)畫布（坐標(biāo)系會(huì)跟著旋轉(zhuǎn)了）
----? 第三步：開始繪制圖形，并填充顏色

22、縮放-scale

? scale方法可以縮放畫布?？捎盟鼇碓鰷p圖形在canvas 中的像素?cái)?shù)目，對(duì)圖形進(jìn)行縮小或者放大。
----? scale(x, y)
----? x 為水平縮放因子，y 為垂直縮放因子，也支持負(fù)數(shù)。
----? 如果比1 小，會(huì)縮小圖形，如果比1 大會(huì)放大圖形。默認(rèn)值為1。
? 注意事項(xiàng)
----? 畫布初始情況下，是以左上角坐標(biāo)為原點(diǎn)。如果參數(shù)為負(fù)實(shí)數(shù)，相當(dāng)于以x 或y 軸作為對(duì)稱軸鏡像反轉(zhuǎn)。
----? 例如，使用translate(0, canvas.height); scale(1,-1); 以y 軸作為對(duì)稱軸鏡像反轉(zhuǎn)。
----? 默認(rèn)情況下，canvas 的1 個(gè)單位為1 個(gè)像素。如果我們?cè)O(shè)置縮放因子是0.5，1 個(gè)單位就變成對(duì)應(yīng)0.5 個(gè)像素，這樣繪制出來的形狀就會(huì)是原先的一半。同理，設(shè)置為2.0 時(shí)，1 個(gè)單位就對(duì)應(yīng)變成了2 像素，繪制的結(jié)果就是圖形放大了2 倍。
? 縮放案例實(shí)戰(zhàn)
----? 第一步：先保存一下Canvas當(dāng)前的狀態(tài)，并確定縮放原點(diǎn)
----? 第二步：在繪制圖形前縮放畫布
----? 第三步：開始繪制圖形，并填充顏色

23、Canvas動(dòng)畫

? Canvas繪圖都是通過JavaScript 去操控的，如要實(shí)現(xiàn)一些交互性動(dòng)畫是相當(dāng)容易的。那Canvas是如何做一些基本動(dòng)畫的？
----? canvas可能最大的限制就是圖像一旦繪制出來，它就是一直保持那樣了。
----? 如需要執(zhí)行動(dòng)畫，不得不對(duì)畫布上所有圖形進(jìn)行一幀一幀的重繪（比如在1秒繪60幀就可繪出流暢的動(dòng)畫了）。
----? 為了實(shí)現(xiàn)動(dòng)畫，我們需要一些可以定時(shí)執(zhí)行重繪的方法。然而在Canvas中有三種方法可以實(shí)現(xiàn)：
----? 分別為setInterval 、setTimeout 和requestAnimationFrame 三種方法來定期執(zhí)行指定函數(shù)進(jìn)行重繪。
? Canvas 畫出一幀動(dòng)畫的基本步驟（如要畫出流暢動(dòng)畫，1s 需繪60幀）：
----? 第一步：用clearRect 方法清空canvas ，除非接下來要畫的內(nèi)容會(huì)完全充滿canvas（例如背景圖），否則你需要清空所有。
----? 第二步：保存canvas 狀態(tài)，如果加了canvas 狀態(tài)的設(shè)置（樣式，變形之類的），又想在每畫一幀之時(shí)都是原始狀態(tài)的話，你需要先保存一下，后面再恢復(fù)原始狀態(tài)。
----? 第三步：繪制動(dòng)畫圖形（animated shapes），即繪制動(dòng)畫中的一幀。
----? 第四步：恢復(fù)canvas 狀態(tài)，如果已經(jīng)保存了canvas 的狀態(tài)，可以先恢復(fù)它，然后重繪下一幀。

24、繪制秒針-setInterval

? 繪制秒針動(dòng)畫，繪制一幀的步驟：
----? 第一步：用clearRect(x,y, w,h)方法，清空canvas。
----? 第二步：保存canvas 狀態(tài)。
----? 第三步：修改canvas 狀態(tài)（樣式、移動(dòng)坐標(biāo)、旋轉(zhuǎn)等）。
----? 第四步：繪制秒針圖形（即繪制動(dòng)畫中的一幀）。
----? 第五步：恢復(fù)canvas 狀態(tài)，準(zhǔn)備重繪下一幀。
? setTimout定時(shí)器的缺陷
----? setTimeout定時(shí)器不是非常精準(zhǔn)的，因?yàn)閟etTimeout的回調(diào)函數(shù)是放到了宏任務(wù)中等待執(zhí)行。
----? 如果微任務(wù)中一直有未處理完成的任務(wù)，那么setTimeout的回調(diào)函數(shù)就有可能不會(huì)在指定時(shí)間內(nèi)觸發(fā)回調(diào)。
----? 如果想要更加平穩(wěn)和更加精準(zhǔn)的定時(shí)執(zhí)行某個(gè)任務(wù)的話，可以使用requestAnimationFrame函數(shù)。

25、繪制秒針-requestAnimationFrame

? requestAnimationFrame函數(shù)
----? 告訴瀏覽器——你希望執(zhí)行一個(gè)動(dòng)畫，并且要求瀏覽器在下次重繪之前調(diào)用該函數(shù)的回調(diào)函數(shù)來更新動(dòng)畫。
----? 該方法需要傳入一個(gè)回調(diào)函數(shù)作為參數(shù)，該回調(diào)函數(shù)會(huì)在瀏覽器下一次重繪之前執(zhí)行
----? 若想在瀏覽器下次重繪之前繼續(xù)更新下一幀動(dòng)畫，那么在回調(diào)函數(shù)自身內(nèi)必須再次調(diào)用requestAnimationFrame()
----? 通常每秒鐘回調(diào)函數(shù)執(zhí)行60 次左右，也有可能會(huì)被降低。
? 繪制秒針動(dòng)畫，繪制一幀的步驟：
----? 第一步：用clearRect(x,y, w,h)方法，清空canvas。
----? 第二步：保存canvas 狀態(tài)。
----? 第三步：修改canvas 狀態(tài)（樣式、移動(dòng)坐標(biāo)、旋轉(zhuǎn)等）。
----? 第四步：繪制秒針圖形（即繪制動(dòng)畫中的一幀）。
----? 第五步：恢復(fù)canvas 狀態(tài)，準(zhǔn)備重繪下一幀。

26、太陽系旋轉(zhuǎn)

? 太陽系旋轉(zhuǎn)動(dòng)畫，繪制一幀的步驟：
----? 第一步：用clearRect(x,y, w,h)方法，清空canvas，并初始化全局樣式。
----? 第二步：保存canvas 狀態(tài)。
----? 第三步：繪制背景、繪制地球（繪制月球）、繪制陰影效果。
----? 第五步：恢復(fù)canvas 狀態(tài)，準(zhǔn)備重繪下一幀。

27、時(shí)鐘

? 求圓上x, y的坐標(biāo)：
----? 圓上x, y軸坐標(biāo)實(shí)際上就是右圖的( AB, BC )，AC為時(shí)鐘半徑
----? x= AB = cosa * AC => x = Math.cos(弧度) * R
----? y= BC = sina * AC => y = Math.sin(弧度) * R
----? 角度與弧度的JS表達(dá)式：弧度=( Math.PI / 180 ) * 角度=>弧度= 1角度對(duì)應(yīng)的弧度* 角度。
----? 比如：旋轉(zhuǎn)90°：弧度為Math.PI / 2；旋轉(zhuǎn)180°：為Math.PI ；旋轉(zhuǎn)360°：為Math.PI * 2；旋轉(zhuǎn)-90°：為-Math.PI / 2；
----? 第i小時(shí)的坐標(biāo)：
----? x = Math.cos( Math.PI * 2 / 12 * i ) * R
----? y = Math.sin( Math.PI * 2 / 12 * i ) * R

? 繪制時(shí)鐘，繪制一幀的步驟：
----? 第一步：用clearRect(x,y, w,h)方法，清空canvas 。
----? 第二步：保存canvas 狀態(tài)。
----? 第三步：繪制白背景、繪制數(shù)字、繪制時(shí)/分/秒針、繪制圓、繪制時(shí)分刻度。
----? 第四步：恢復(fù)canvas 狀態(tài)，準(zhǔn)備重繪下一幀。
文章來源地址http://www.zghlxwxcb.cn/news/detail-477398.html

到了這里，關(guān)于【數(shù)據(jù)可視化】數(shù)據(jù)可視化Canvas的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！