canvasjs數據可視,canvas數據可視化

本文目錄一覽：

• 1、有哪些用 JavaScript 實現的圖形庫
• 2、如何用js新建一個canvas？
• 3、Web前端都可以從事哪些崗位?
• 4、常用的數據可視化軟件有哪些
• 5、JS之使用Canvas繪圖
• 6、html5 canvas繪圖有什麼用

有哪些用 JavaScript 實現的圖形庫

JS圖形、圖標庫推薦：

1. JS Charts

JS Charts 是個基於JavaScript的圖表生成器，不需要任何編碼。JS Charts 非常容易使用，只要用戶使用客戶端腳本（比如，在 web 瀏覽器中執行）。它不需要多餘的插件和服務器模塊，只需要下載 JS Charts 的腳本，準備好 XML，JSON 或者 JavaScript 數組數據。

2. Canvasjs

CanvasJS 是個易用的 HTML5 JavaScript 圖表庫，基於 Canvas 元素。Graphs 可以通過設備渲染，包括 iPhone，iPad，Android，Windows Phone，Microsoft Surface，Desktops 等等。它允許用戶創建適用於所有設備，不影響 web 應用程序的功能和可維護性的富儀錶盤。CanvcasJS 有着非常漂亮的主題和超過傳統的 Flash 和 SVG 圖表 10x 倍以上的速度——生成輕量級，漂亮和響應式的儀錶圖。

3. Chart.js

Chart.js 是個簡單的，面向對象的客戶端圖形庫，用戶可以用 6 中不同的方式來可視化數據。每個方式都是動畫效果的，完全自定義，而且看起來非常好看，即使在 retina 顯示。它使用 HTML5 canvas 元素，支持所有現代瀏覽器，並且支持 IE7/8。

4. Aristochart

Aristochart 是個高度自定義，靈活的折線 Canvas 圖表庫，允許用戶集中精力在圖表的審美方面，後台工作做得非常好。Aristochart 有個持續進步的社區，提供許多不斷增長的主題給用戶選擇。

5. xCharts

xCharts 是一個使用 D3.js 來構建漂亮的可定製的數據驅動的 JavaScript圖表庫，他使用HTML，CSS，SVG實現圖表，xCharts 被設計為一個動態的、流暢的、開放的和可定製化的庫。

6. BonsaiJS

BonsaiJS 是個輕量級的 JavaScript圖形庫，提供直觀的圖形 API 和 SVG 渲染器。主要特性包括：架構分離的運行器和渲染器；iFrame，Worker 和 Node 運行上下文；形狀，路徑，Assets（音頻，圖像，字體，subMovies），Keyframe 和常規動畫，等等。支持現代化瀏覽器： Safari, Chrome 和 Firefox。

7. Sigma.js

Sigma.js 是個免費開源的 JavaScript圖形庫，使用 HTML5 canvas 元素。它的設計是特別為了在 web 界面分享交互式網絡 Map 和動態展示網絡數據庫。

8. Morris.js

Morris.js 是個輕量級的 JavaScript庫，使用 jQuery 和 Raphaenuml 來繪製時序圖。 Morris.js 生命周期是從代碼驅動 howmanyleft.co.uk 圖表開始的。它支持的瀏覽器有： IE6+, Safari/Chrome/Firefox, iOS 3+ 和 Android 3+。它的公共 API 非常的小，只有一個函數： Morris.Line(選項)，包括了許多配置選項。

9. Paper.js

Paper.js 是一個開源的向量圖形腳本框架，基於 HTML5Canvas 開發。提供清晰的場景圖、DOM和大量強大的功能用來創建各種向量圖和貝塞爾曲線。

10. AmCharts

AmCharts 是個高級圖表庫，適用於所有數據的可視化。AmCharts 包括： Column, Bar, Line, Area, Step, Step without risers, Smoothed line, Candlestick, OHLC, Pie/Donut, Radar/ Polar, XY/Scatter/Bubble, Bullet, Funnel/Pyramid 等等。

11. Smoothie Charts

Smoothie Charts是個極小的圖表庫，專為實時流媒體數據設計的。Joe Walnes 想展示 WebSocket推動的實時的流數據。雖然很多圖表庫允許用戶動態更新數據，但是沒有一個是可以優化源源不斷的流數據。

12. Dygraphs

Dygraphs 是個快速，靈活，開源的 JavaScript 圖表庫。它允許用戶展示和解析密集的數據集。可以高亮需要強調的數據集。可以使用鼠標點擊或者用鼠標拖動來縮放圖表；可以修改數值或者點擊條目來調整平均周期。

13. Grafico

Grafico 是 Grafico 是一個基於 Raphaël 和 Prototype.js 構建的 JavaScript 圖表庫，提供了各種圖表類型。這些漂亮的圖表，有利於傳遞他們的信息。

14. Highchart JS

Highcharts JS 是一個製作圖表的純 Javascript類庫，主要特性如下：兼容性：兼容當今所有的瀏覽器，包括 iPhone、IE 和火狐等等；對個人用戶完全免 費；純JS，無BS；支持大部分的圖表類型：直線圖，曲線圖、區域圖、區域曲線圖、柱狀圖、餅裝圖、散布圖；跨語言：不管是 PHP、Asp.net 還是 Java 都可以使用。

15. Flotr

Flotr 是一個基於 Prototype 開發的 JavaScript繪圖工具。支持圖例，鼠標跟蹤，圖片區域選擇，圖片縮放，添加事件鉤子（event hook），通過CSS設置樣式等。

16. Flot

Flot 是受 Plotr 和 PlotKit 的 啟發，Ole Laursen 基於 jquery 開發了一個圖表繪製(WEB Chart)插件並命名為 flot。 flot 是個純 JavaSript 庫，專註於簡單的使用方式，迷人的外觀和交互式特性。支持的瀏覽器有： Internet Explorer 6+, Chrome, Firefox 2+, Safari 3+ and Opera 9.5+。

17. jFreeChart

JFreeChart 主要用來各種各樣的圖表，這些圖表包括：餅圖、柱狀圖(普通柱狀圖以及堆棧柱狀圖)、線圖、區域圖、分佈圖、混合圖、甘特圖以及一些儀錶盤等等。JFreeChart 項目歷史悠久，而且有大量的開發者在維護。

18. Plotkit

PlotKit 是一個純 JavaScript 繪圖工具包。它支持 HTML Canvas 和 Adobe SVG。有着很完整的文檔，方便用戶使用。

19. Planetary.js

Planetary.js 是個令人稱奇的創建交互式 web 地球儀的 JavaScript庫。它使用 D3 和 TopoJSON 來解析和渲染地理信息。Planetary.js 使用基於插件的架構，甚至默認自身就是個插件！這使得 Planetary.js 非常靈活，而且它是允許用戶完全自定義，包括顏色，大小，rotation 等等。更重要的是，用戶可以在任意位置使用自定義的顏色和大小來顯示動畫「pings」；它還支持鼠標拖動和縮放，100% 免費和開源。

20. Ember Charts

Ember Charts 是個圖表庫，使用 Ember.js 和 d3.js 框架構建的。它包括時間線，條形圖，餅圖和散點圖，非常容易擴展和修改。這些圖表組件都是開箱即用的，在圖表交互和演示方面應用的很好。

21. Sparky

Sparky 是個免費的 JavaScript 波形圖庫，依賴於 Raphaël ，非常容易使用。支持多個圖表類型（折線，條形，area），折線和區域圖可以有多個顏色選擇。

22. Envision.js

Envision.js 是個 JavaScript 庫，用來簡化，快速創建交互式的 HTML5 可視化圖表。它包括兩個圖表類型：時序圖和 Finance ，提供 API 給開發者，用戶可以直接自定義創建圖表。這個庫氏基於 Flotr2 和 HTML5 Canvas 的。它與框架無關，依賴於幾個小的 JavaScript 庫。

23. Dc.js

dc.js 是個 JavaScript 圖表庫，有着原生的 crossfilter， 支持和允許高效展示大型多維數據集（基於 crossfilter 的示例）；圖表使用 dc.js 渲染，是使用原生數據驅動，所以能得到用戶的實時反饋；dc.js 最大的亮點在於能提供一個簡單而強大的 JavaScript 庫，能進行數據可視化和分析；不僅支持桌面瀏覽器還支持移動端。

24. ElyCharts

Elycharts 是一個易於使用的，可定製的 JavaScript圖表繪製組件。這個組件可用於繪製大部分常用的圖表類型包括：line, column, are, bar, pie, sparklines and combinations。它支持多種交互式功能包括：鼠標跟蹤、事件處理、利用各種動畫高亮顯示選擇中的區域，Tooltip，HTML錨點等。可以動 態修改數據，並以漂亮的動畫效果展示圖表中的變化。圖表利用SVG/VML技術生成，基於jQuery + Raphaël開發。

25. AwesomeChartJS

AwesomeChartJS Awesome Chart JS 是一個 JavaScript生成圖表的類庫，它利用了 HTML5 的 canvas 標籤來創建統計圖表。此類庫就是為了減輕開發者的工作量，使用它只需書寫幾行代碼便能生成漂亮的圖表。

26. Arbor.js

Arbor.js 是一個利用 Web Works 和 jQuery創建的可視化圖形庫，它為圖形組織和屏幕刷新處理提供了一個高效的、力導向的布局算法。

27. CanvasXpress

canvasXpress 是一個基於HTML5 canvas標籤實現的 JavaScript圖表類庫，它能夠支持線性圖、柱形圖、餅圖和熱點圖等多種常見的圖表類型。它所生成的圖表交互性很強，鼠標放 上去時會動態顯示值。除此之外，它也具有相當高的可定製性，可設置圖表的文字、顏色和要顯示/隱藏的元素等。當然更重要的一點是，雖然它使用了 HTML5，但是依然支持IE6瀏覽器。

28. JSXGraph

JSXGraph 是一個支持各種瀏覽器的交互式幾何圖庫繪製。JSXGraph 使用 SVG 和 VML。

29. Rickshaw

Rickshaw 是一個用於繪製時序圖的簡單 jS 庫，基於 Mike Bostock』s delightful D3 庫構建。

30. rGraph

RGraph 是基於HTML5 canvas標籤的HTML5 canvas圖形庫，支持 20 種不同的可視化類型。使用 canvas 標籤，RGraph 創建「HTML5 圖表」，意味着更快的 web 頁面加載和更少的 web 服務器加載。這能幫助減小 web 頁面的大小，低能耗和更快的瀏覽速度。

31. Fusion Chart

FusionCharts Suite XT 是個專業的 JavaScript圖表庫，能創建任何類型的圖表。它創建的圖表都是可以進行完全自定義的，標籤，字體，邊界等等，都可以進行修改。它有很強的交互功能，有許多信息提示，可 點擊的 legend 關鍵字，還有 dril-down，縮放/滾動 和單擊打印圖表功能。

32. Graph Dracula

Dracula 是用一系列的工具來顯示和布局互動圖表，包括各種相關的算法。它只是純 JavaScript 和 SVG ，並無 Flash，Java，其他插件。它非常容易使用，用戶可以很簡單的自定義任意的元素。

33. Bluff

Bluff 是個 JavaScript 的 Ruby 的 Gruff graphing library端口。它支持所有 Gruff 的特性，但是有着最小的依賴。用戶只需要運行一個第三方腳本： JS.Class 副本(壓縮後只有 2.6kB ) 和 Google 的 ExCanvas 副本，用來支持 IE 中的 canvas。這兩個腳本在 Bluff 中都有下載。Bluff 自身壓縮後大小大概有 11KB 。

34. Pizza Pie Chart

Pizza Pie Charts 是個響應式餅圖圖表，基於 Adobe Snap SVG 框架，通過 HTML 標記和 CSS 來替代 JavaScript 對象，更容易集成各種先進的技術。

35. jGraph

HTML5 圖表組件，完全支持l IE 6-8 和觸屏設備。 JGraph 自2001年來就一直提供最先進的圖表軟件組件，是第一個流行的 JGraph Swing 庫。然後在 2005 年走在時代的前沿開發 mxGraph。

如何用js新建一個canvas？

用js新建canvas的方法如下：

var canvas = document.createElement(‘canvas’);

canvas.id = “CursorLayer”;

canvas.width = 1224;

canvas.height = 768;

canvas.style.zIndex = 8;

canvas.style.position = “absolute”;

canvas.style.border = “1px solid”;

document.body.appendChild(canvas);

注意：此處一定要追加到body裏面。

Web前端都可以從事哪些崗位?

前端即網站前台部分，既包含了頁面設計，又包含了頁面實現，主要是指運行在PC端，移動端等瀏覽器上展現給用戶瀏覽的網頁。

「前端」是網站與用戶直接交互的部分，從字體到布局再到圖片大小，以及下拉菜單、展示欄和動態效果等等，這些視覺上可見的所有內容，都是由瀏覽器解析、處理、渲染相關HTML、CSS、JavaScript後呈現出來的結果。

簡單來說，你在使用網絡過程中看到的所有網站上的展示頁面和供你操作的使用頁面都可以稱之為前端。

IT行業中的前端一般泛指兩類崗位：

1.UI設計。即用戶界面設計，對PC互聯網和移動互聯網進行設計，如網頁設計、App頁面設計和布局，icon設計，交互設計等，設計時除了視覺美感外，還需考慮人機交互的邏輯，主要載體是各種電子顯示屏。

2.Web前端開發。將UI設計的效果圖實現成瀏覽器可以運行的網頁，並配合後端做網頁的數據顯示和交互等可視方面的工作內容。

常用的數據可視化軟件有哪些

大數據正在走進人們的生活。雖然獲取數據問題不大，但有很多人不知道如何得出結論，因為數據太多。因此，我在這裡提供了 8 個有用的數據可視化工具，幫助你了解數據，希望這能夠幫助你！

1、Datawrapper

Datawrapper是一個用於製作交互式圖表的在線數據可視化工具。一旦您從CSV文件上傳數據或直接將其粘貼到字段中，Datawrapper將生成一個條，線或任何其他相關的可視化文件。許多記者和新聞機構使用Datawrapper將實時圖表嵌入到他們的文章中。這是非常容易使用和生產有效的圖形。

2、Tableau Public

Tableau Public可能是最流行的可視化工具，它支持各種圖表，圖形，地圖和其他圖形。這是一個完全免費的工具，你用它製作的圖表可以很容易地嵌入到任何網頁中。他們有一個不錯的畫廊，顯示通過Tableau創建的可視化效果。

雖然它提供的圖表和圖形比其他類似工具要好得多，但我並不喜歡使用它的免費版本，因為它附帶了一個很大的頁腳。如果不是像我這樣大的關閉，那麼你一定要試試看。或者如果你能負擔得起，你可以去付費版本。

3、Hightopo

Hightopo 作為成熟的數據可視化編輯器，具備可復用、 動靜結合獨特的展示效果，使得數據可視化靈活強大，動靜皆宜，為廣大用戶提供了無限的應用能力和想像空間。

其擁有自主研發的可視化軟件，泛用於工業物聯網場景的 B/S 模式，支持 2D、3D 圖形組態。兼備了國外可視化輕量跨平台操作的優秀特點，可與企業自有系統無縫整合，輕鬆將邊緣數據統一為一個功能全面的數據可視化系統。實現現代化、高性能、跨平台圖形展示和良好的交互體驗。同時還可以免費申請試用軟件。

4、Chart.js

非常適合小型項目。儘管只有六種圖表類型，開源圖書館Chart.js是用於愛好和小型項目的完美數據可視化工具。使用HTML 5 canvas元素繪製圖表，Chart.js創建響應式平面設計，並且正在迅速成為最流行的開源圖表庫之一。

5、Raw

Raw將自己定義為「電子表格和矢量圖形之間的缺失鏈接」。它建立在D3.js之上，設計得非常好。它有這樣一個直觀的界面，你會覺得你之前使用過它。它是開源的，不需要任何註冊。

它有一個21圖表類型的庫可供選擇，所有的處理在瀏覽器中完成。所以你的數據是安全的。RAW是高度可定製和可擴展的，甚至可以接受新的自定義布局。

6、Infogram

Infogram使您可以在線創建圖表和圖表。它有一個有限的免費版本和兩個付費選項，其中包括200+地圖，私人共享和圖標庫等功能。

它配備了一個易於使用的界面，其基本圖表設計良好。我不喜歡的一個功能是當您嘗試將交互式圖表嵌入到您的網頁（免費版）時所獲得的巨大徽標。如果他們能像DataWrapper使用的小文本那樣更好。

7、Timeline JS

顧名思義，Timeline JS可以幫助您創建美麗的時間線而無需編寫任何代碼。它是一個免費的開源工具，被Time和Radiolab等一些最受歡迎的網站所使用。

這是一個非常容易遵循四步過程來創建您的時間表，這在這裡解釋。最好的部分？它可以從各種來源獲取媒體，並內置對Twitter，Flickr，Google Maps，YouTube，Vimeo，Vine，Dailymotion，Wikipedia，SoundCloud和其他類似網站的支持。

8、Plotly

Plotly是一個基於Web的數據分析和繪圖工具。它支持具有內置社交分享功能的圖表類型的良好集合。可用的圖表和圖表類型具有專業的外觀和感覺。創建圖表只需要加載信息並自定義布局，坐標軸，注釋和圖例。如果你想要開始，你可以在這裡找到一些靈感。

JS之使用Canvas繪圖

canvas 元素負責在頁面中設定一個區域，然後就可以通過 JavaScript 動態地在這個區域中繪製圖形。

要使用 canvas 元素，必須先設置其 width 和 height 屬性，指定可以繪圖的區域大小。出現在開始和結束標籤中的內容是後備信息，如果瀏覽器不支持 canvas 元素，就會顯示這些信息。

如果不添加任何樣式或者不繪製任何圖形，在頁面中是看不到該元素的。

要在這塊畫布（canvas）上繪圖，需要取得繪圖上下文。而取得繪圖上下文對象的引用，需要調用getContext() 方法並傳入上下文的名字。傳入 “2d” ，就可以取得 2D 上下文對象。

使用 toDataURL() 方法，可以導出在 canvas 元素上繪製的圖像。這個方法接受一個參數，即圖像的 MIME 類型格式，而且適合用於創建圖像的任何上下文。

取得畫布中的一幅 PNG 格式的圖像：

如果繪製到畫布上的圖像源自不同的域， toDataURL() 方法會拋出錯誤。

使用 2D 繪圖上下文提供的方法，可以繪製簡單的 2D 圖形，比如矩形、弧線和路徑。2D 上下文的坐標開始於 canvas 元素的左上角，原點坐標是(0,0)。

2D 上下文的兩種基本繪圖操作是填充和描邊。填充，就是用指定的樣式（顏色、漸變或圖像）填充圖形；描邊，就是只在圖形的邊緣畫線。大多數 2D 上下文操作都會細分為填充和描邊兩個操作，而操作的結果取決於兩個屬性： fillStyle 和 strokeStyle 。

這兩個屬性的值可以是字符串、漸變對象或模式對象，而且它們的默認值都是 “#000000” 。如果為它們指定表示顏色的字符串值，可以使用 CSS 中指定顏色值的任何格式，包括顏色名、十六進制碼、rgb 、 rgba 、 hsl 或 hsla 。

與矩形有關的方法包括 fillRect() 、strokeRect() 和 clearRect() 。這三個方法都能接收 4 個參數：矩形的 x 坐標、矩形的 y 坐標、矩形寬度和矩形高度。這些參數的單位都是像素。

fillRect() 方法在畫布上繪製的矩形會填充指定的顏色。填充的顏色通過 fillStyle 屬性指定：

strokeRect() 方法在畫布上繪製的矩形會使用指定的顏色描邊。描邊顏色通過 strokeStyle 屬性指定。

描邊線條的寬度由 lineWidth 屬性控制，該屬性的值可以是任意整數。另外，通過 lineCap 屬性可以控制線條末端的形狀是平頭、圓頭還是方頭（ “butt” 、”round” 或 “square” ），通過 lineJoin 屬性可以控制線條相交的方式是圓交、斜交還是斜接（ “round” 、 “bevel” 或 “miter” ）。

clearRect() 方法用於清除畫布上的矩形區域。本質上，這個方法可以把繪製上下文中的某一矩形區域變透明。

通過路徑可以創造出複雜的形狀和線條。要繪製路徑，首先必須調用 beginPath() 方法，表示要開始繪製新路徑。然後，再通過調用下列方法來實際地繪製路徑。

如果想繪製一條連接到路徑起點的線條，可以調用closePath() 。如果路徑已經完成，你想用 fillStyle 填充它，可以調用 fill() 方法。另外，還可以調用 stroke() 方法對路徑描邊，描邊使用的是 strokeStyle 。最後還可以調用 clip() ，這個方法可以在路徑上創建一個剪切區域。

繪製一個不帶數字的時鐘錶盤：

isPointInPath() 方法接收 x 和 y 坐標作為參數，用於在路徑被關閉之前確定畫布上的某一點是否位於路徑上。

繪製文本主要有兩個方法： fillText() 和 strokeText() 。這兩個方法都可以接收 4 個參數：要繪製的文本字符串、x 坐標、y 坐標和可選的最大像素寬度。

兩個方法都以下列 3 個屬性為基礎：

fillText() 方法使用fillStyle 屬性繪製文本， strokeText() 方法使用 strokeStyle 屬性為文本描邊。

通過上下文的變換，可以把處理後的圖像繪製到畫布上。2D 繪製上下文支持各種基本的繪製變換。創建繪製上下文時，會以默認值初始化變換矩陣，在默認的變換矩陣下，所有處理都按描述直接繪製。為繪製上下文應用變換，會導致使用不同的變換矩陣應用處理，從而產生不同的結果。

把原點變換到錶盤的中心：

使用 rotate() 方法旋轉時鐘的錶針：

可以調用 save() 方法，調用這個方法後，當時的所有設置都會進入一個棧結構，得以妥善保管。調用 restore() 方法，在保存設置的棧結構中向前返回一級，恢復之前的狀態。

save() 方法保存的只是對繪圖上下文的設置和變換，不會保存繪圖上下文的內容。

可以使用 drawImage()方法把一幅圖像繪製到畫布上。

以使用三種不同的參數組合。最簡單的調用方式是傳入一個 HTML img 元素，以及繪製該圖像的起點的 x 和 y 坐標。

如果想改變繪製後圖像的大小，可以再多傳入兩個參數，分別表示目標

寬度和目標高度。通過這種方式來縮放圖像並不影響上下文的變換矩陣。

繪製出來的圖像大小會變成 20×30 像素。

可以選擇把圖像中的某個區域繪製到上下文中。 drawImage() 方法的這種調用方式總共需要傳入 9 個參數：要繪製的圖像、源圖像的 x 坐標、源圖像的 y 坐標、源圖像的寬度、源圖像的高度、目標圖像的 x 坐標、目標圖像的 y 坐標、目標圖像的寬度、目標圖像的高度。這樣調用drawImage() 方法可以獲得最多的控制。

2D 上下文會根據以下幾個屬性的值，自動為形狀或路徑繪製出陰影。

要創建一個新的線性漸變，可以調用 createLinearGradient() 方法。這個方法接收 4 個參數：起點的 x 坐標、起點的 y 坐標、終點的 x 坐標、終點的 y 坐標。調用這個方法後，它就會創建一個指定大小的漸變，並返回

CanvasGradient 對象的實例。

創建了漸變對象後，下一步就是使用 addColorStop() 方法來指定色標。這個方法接收兩個參數：色標位置和 CSS 顏色值。色標位置是一個 0（開始的顏色）到 1（結束的顏色）之間的數字。

為了讓漸變覆蓋整個矩形，而不是僅應用到矩形的一部分，矩形和漸變對

象的坐標必須匹配才行。

要創建徑向漸變（或放射漸變），可以使用 createRadialGradient() 方法。這個方法接收 6 個參數，對應着兩個圓的圓心和半徑。前三個參數指定的是起點圓的原心（x 和 y）及半徑，後三個參數指定的是終點圓的原心（x 和 y）及半徑。

模式其實就是重複的圖像，可以用來填充或描邊圖形。要創建一個新模式，可以調用createPattern() 方法並傳入兩個參數：一個 HTML img 元素和一個表示如何重複圖像的字符串。其中，第二個參數的值與 CSS 的 background-repeat 屬性值相同，包括 “repeat” 、 “repeat-x” 、”repeat-y” 和 “no-repeat” 。

createPattern() 方法的第一個參數也可以是一個 video 元素，或者另一個 canvas 元素。

2D 上下文的一個明顯的長處就是，可以通過 getImageData() 取得原始圖像數據。這個方法接收4 個參數：要取得其數據的畫面區域的 x 和 y 坐標以及該區域的像素寬度和高度。

取得左上角坐標為(10,5)、大小為 50×50 像素的區域的圖像數據：

返回的對象是 ImageData 的實例。每個 ImageData 對象都有三個屬性： width 、 height 和data 。其中 data 屬性是一個數組，保存着圖像中每一個像素的數據。

在 data 數組中，每一個像素用4 個元素來保存，分別表示紅、綠、藍和透明度值。

數組中每個元素的值都介於 0 到 255 之間（包括 0 和 255）。

還有兩個會應用到 2D 上下文中所有繪製操作的屬性： globalAlpha 和 globalCompositionOperation 。其中， globalAlpha 是一個介於 0 和 1 之間的值（包括 0和 1），用於指定所有繪製的透明度。默認值為 0。如果所有後續操作都要基於相同的透明度，就可以先把 globalAlpha 設置為適當

值，然後繪製，最後再把它設置回默認值 0。

第二個屬性 globalCompositionOperation 表示後繪製的圖形怎樣與先繪製的圖形結合。

WebGL 是針對 Canvas 的 3D 上下文。

WebGL是從 OpenGL ES 2.0 移植到瀏覽器中的，而 OpenGL ES 2.0 是遊戲開發人員在創建計算機圖形圖像時經常使用的一種語言。WebGL 支持比 2D 上下文更豐富和更強大的圖形圖像處理能力。

WebGL 涉及的複雜計算需要提前知道數值的精度，而標準的 JavaScript 數值無法滿足需要。為此，WebGL 引入了一個概念，叫類型化數組（typed arrays）。類型化數組也是數組，只不過其元素被設置為特定類型的值。

類型化數組的核心就是一個名為 ArrayBuffer 的類型。每個 ArrayBuffer 對象表示的只是內存中指定的位元組數，但不會指定這些位元組用於保存什麼類型的數據。通過 ArrayBuffer 所能做的，就是為了將來使用而分配一定數量的位元組。

創建了 ArrayBuffer 對象後，能夠通過該對象獲得的信息只有它包含的位元組數，方法是訪問其byteLength 屬性：

使用 ArrayBuffer （數組緩衝器類型）的一種特別的方式就是用它來創建數組緩衝器視圖。其中，最常見的視圖是 DataView ，通過它可以選擇 ArrayBuffer 中一小段位元組。為此，可以在創建 DataView實例的時候傳入一個 ArrayBuffer 、一個可選的位元組偏移量（從該位元組開始選擇）和一個可選的要選擇的位元組數。

實例化之後， DataView 對象會把位元組偏移量以及位元組長度信息分別保存在 byteOffset 和byteLength 屬性中。

類型化視圖一般也被稱為類型化數組，因為它們除了元素必須是某種特定的數據類型外，與常規的數組無異。

類型化數組是 WebGL 項目中執行各種操作的重要基礎。

目前，主流瀏覽器的較新版本大都已經支持 canvas 標籤。同樣地，這些版本的瀏覽器基本上也都支持 2D 上下文。但對於 WebGL 而言，目前還只有 Firefox 4+和 Chrome 支持它。

html5 canvas繪圖有什麼用

canvas能做什麼?

canvas是HTML5中的新元素，你可以使用javascript用它來繪製圖形、圖標、以及其它任何視覺性圖像。它也可用於創建圖片特效和動畫。如果你掌握了完整的命令，你可以用canvas創建豐富的web應用程序。如果你想很好的使用canvas，你首先應該很好的掌握javascript。

這篇文章是一篇基礎教程，你能了解一些設計方法。比如用HTML5 canvas 進行圖形設計。

用HTML5 canvas設計

設計和開發一個web頁面會包含很多的內容，用戶首先需要有一個支持HTML canvas的瀏覽器。

首先創建一個HTML5文檔頁面，設置document type是HTMl5的；

其次在頁面body區域添加一個canvas標籤：

canvas/canvas

第三、給這個canvas定義一個id屬性，這樣方便我們在js中調用它。添加一個寬和高屬性，在canvas標籤中添加一個當瀏覽器不支持的時候顯示給用戶的內容。下面是列子代碼：

canvas id=”canvastest” width=”500″ height=”600″

p你的瀏覽器不支持HTML5 canvas,請更新您的瀏覽器！/p

/canvas

現在我們創建了一個包含HTML5 canvas 元素的空白畫布，我們將使用js和canvas元素的方法來創建我們的圖像。

添加一個javascript用HTMl5 canvas的方法：

var canvasTest=document.getElementById(‘canvastest’);//獲取canvas元素；

var testcontext=canvasTest.getContext(‘2d’);

使用javascript來創建你的畫布，你可以使用矩形、圓圈和三角形,並使用線、幻燈片和漸變來創建你的設計。

下面是完成的代碼：

var canvasTest=document.getElementById(‘canvastest’);

var testcontext=canvasTest.getContext(‘2d’);

// create rectangle

testcontext.fillStyle=’rgb(0,125,125)’;

testcontext.fillRect(10,10,250,180);

// create circle

testcontext.beginPath();

testcontext.arc(300, 340, 100, 0, Math.PI * 2, true);

testcontext.closePath();

testcontext.fillStyle=’rgb(75,10,125)’;

testcontext.fill();

testcontext.stroke();

我們可以將上面的代碼加入window.onload，或者jQuery的ready方法里，當文檔加載完，將會創建文明的圖形。

一些HTML5 canvas 圖像解決方案

用與HTML5 Canvas元素你可以開發動態繪圖對象比如如可視化信息或數據圖。HTML5 canvas 可以在javascript的幫助下很容易的繪製二維圖形。讓我們來看一下HTML5 canvas元素的一些數據圖應用。

1. HumbleFinance

HumbleFinance是用js開發的一個開源的數據可視化圖表，它用HTML5 canvas生成可視化圖表數據，它可以用一個軸來展示任何兩個二維的數據集。

地址：

2.Graphr

Graphr是一個用HTML5 canvas寫的一個計算器應用，有每個圖像計算器應有的基本功能。

地址：

3.用HTML5和jQuery創建的華麗的動畫餅圖

你可以用javascript和HTML5來創建一個交互式餅圖，有華麗的動畫效果。這在之前只能用flash來完成，現在也可以使用最新的HTML5技術了。

地址：

4. AwesomeJS

AwesomeJS 能夠讓你創建簡單有用的圖表，而僅需幾行代碼即可。這是一個基於HTML5和canvas的javascript庫。

地址：

5.Ticker Plot（股票圖）

Ticker Plot（股票圖）是每一個在工作是使用圖標的web開發人員都必備的一個圖表工具。這是一個開源的項目，它使用HTML5 canvas在畫布上繪製圖形符號和鼠標事件。Ticker Plot（股票圖）是專門為股票行情和技術分析設計的。