整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
HTML5 <canvas> 標簽用于繪制圖像（通過腳本，通常是 JavaScript）。
不過，<canvas> 元素本身并沒有繪制能力（它僅僅是圖形的容器） - 您必須使用腳本來完成實際的繪圖任務。
getContext() 方法可返回一個對象，該對象提供了用于在畫布上繪圖的方法和屬性。
一般寫法：<canvas id="tutorial"width="150"height="150"></canvas>
getContext()用來獲得渲染上下文和它的繪畫功能,只有一個參數，目前只支持2d，即：
var canvas=document.getElementById('tutorial');
var ctx=canvas.getContext('2d');
getContext()可以用來檢測當前瀏覽器是不是支持canvas，如果不支持可以用指定文本替代：
var canvas=document.getElementById('tutorial');
if (canvas.getContext){
var ctx=canvas.getContext('2d');// 支持
} else {
// 不支持，可以寫相關提示文字
}
案例：
<script type="text/javascript">
function draw(){
var canvas=document.getElementById('tutorial');
if (canvas.getContext){
var ctx=canvas.getContext('2d');
}
}
</script>
<style type="text/css">
canvas { border: 1px solid black; }
</style>
<body onload="draw();">
<canvas id="tutorial" width="150" height="150"></canvas>
</body>
效果：只是一個空畫布
canvas提供了四種方法繪制矩形
rect()： 創建矩形，僅僅創建并未畫出，仍需要fill或者stroke填充或者畫出來！
fillRect(x, y, width, height) 繪制一個填充的矩形
strokeRect(x, y, width, height) 繪制一個矩形的邊框
clearRect(x, y, width, height)清 除指定矩形區域，讓清除部分完全透明。
例子：
function draw() {
var canvas=document.getElementById('canvas');
if (canvas.getContext) {
var ctx=canvas.getContext('2d');
ctx.fillRect(25,25,100,100);//繪制一個100*100矩形，默認黑色
ctx.clearRect(45,45,60,60);//刪除一個60*60的矩形
ctx.strokeRect(50,50,50,50);//繪制一個50*50的邊框
}}
效果圖：
路徑繪制圖形需要的步驟：
1、首先，你需要創建路徑起始點。
2、然后你使用畫圖命令去畫出路徑。
3、之后你把路徑封閉。
4、一旦路徑生成，你就能通過描邊或填充路徑區域來渲染圖形。
通過以下常用函數來畫圖：
beginPath()新建一條路徑，生成之后，圖形繪制命令被指向到路徑上生成路徑。
closePath()閉合路徑之后圖形繪制命令又重新指向到上下文中。
stroke()通過線條來繪制圖形輪廓。
fill()通過填充路徑的內容區域生成實心的圖形。
moveTo(x,y)將筆觸移動到指定的坐標x以及y上。
lineTo(x, y)繪制一條從當前位置到指定x以及y位置的直線。
arc(x, y, radius, startAngle, endAngle, anticlockwise)畫一個以（x,y）為圓心的以radius為半徑的圓弧（圓），從startAngle開始到endAngle結束，按照anticlockwise給定的方向（默認為順時針）來生成。
arcTo(x1, y1, x2, y2, radius)根據給定的控制點和半徑畫一段圓弧，再以直線連接兩個控制點。
注意：注意：arc()函數中的角度單位是弧度，不是度數。角度與弧度的js表達式:radians=(Math.PI/180)*degrees。
例子1：繪制一個三角形
function draw() {
var canvas=document.getElementById('canvas');
if (canvas.getContext){
var ctx=canvas.getContext('2d');
ctx.beginPath();//新建路徑
ctx.moveTo(75,50);//從75*20的位置開始
ctx.lineTo(100,75);//畫到100*75
ctx.lineTo(100,25);//再畫到100*25
ctx.fill();//填充顏色
}}
效果：
例子2：畫一個是描邊三角形。
function draw() {
var canvas=document.getElementById('canvas');
if (canvas.getContext){
var ctx=canvas.getContext('2d');
// 描邊三角形
ctx.beginPath();
ctx.moveTo(125,125);
ctx.lineTo(125,45);
ctx.lineTo(45,125);
ctx.closePath();
ctx.stroke();//描邊
}}
效果圖：
例子3：通過圓弧畫圖：
function draw() {
var canvas=document.getElementById('canvas');
if (canvas.getContext){
var ctx=canvas.getContext('2d');
ctx.beginPath();
ctx.arc(75,75,50,0,Math.PI*2,true); // 繪制
ctx.moveTo(110,75);
ctx.arc(75,75,35,0,Math.PI,false); // 口(順時針)
ctx.moveTo(65,65);
ctx.arc(60,65,5,0,Math.PI*2,true); // 左眼
ctx.moveTo(95,65);
ctx.arc(90,65,5,0,Math.PI*2,true); // 右眼
ctx.stroke();
}}
效果：
（4）二次貝塞爾曲線及三次貝塞爾曲線
quadraticCurveTo(cp1x, cp1y, x, y)繪制二次貝塞爾曲線，cp1x,cp1y為一個控制點，x,y為結束點。
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)繪制三次貝塞爾曲線，cp1x,cp1y為控制點一，cp2x,cp2y為控制點二，x,y為結束點。
貝塞爾曲線圖：
二次貝塞爾曲線例子：、
function draw() {
var canvas=document.getElementById('canvas');
if (canvas.getContext) {
var ctx=canvas.getContext('2d');
// 二次貝爾賽曲線
ctx.beginPath();
ctx.moveTo(75,25);
ctx.quadraticCurveTo(25,25,25,62.5);
ctx.quadraticCurveTo(25,100,50,100);
ctx.quadraticCurveTo(50,120,30,125);
ctx.quadraticCurveTo(60,120,65,100);
ctx.quadraticCurveTo(125,100,125,62.5);
ctx.quadraticCurveTo(125,25,75,25);
ctx.stroke();
}}
效果：
三次貝塞爾曲線例子：
functiondraw(){
var canvas=document.getElementById('canvas');
if(canvas.getContext){
var ctx=canvas.getContext('2d');
//三次貝塞爾曲線
ctx.beginPath();
ctx.moveTo(75,40);
ctx.bezierCurveTo(75,37,70,25,50,25);
ctx.bezierCurveTo(20,25,20,62.5,20,62.5);
ctx.bezierCurveTo(20,80,40,102,75,120);
ctx.bezierCurveTo(110,102,130,80,130,62.5);
ctx.bezierCurveTo(130,62.5,130,25,100,25);
ctx.bezierCurveTo(85,25,75,37,75,40);
ctx.fill();
}}
效果：
canvas還有很多不錯的功能，如果想學習，可以接續看我的后續教程.
委外待續....
oogle Docs宣布將會把HTML遷移到基于Canvas渲染，這一消息的出現再次把幾年前隨HTML5誕生的標簽重新推到了人們視線之中。Canvas在剛推出時主打的優勢就是更快的渲染速度，堪稱HTML屆的“小飛人”，刷新了人們對Web頁面元素繪制速度的印象。但Canvas的優勢僅限于此嗎？
（圖片來源于網絡）
Canvas是HTML5時代引入的“新”標簽。與很多標簽不同，Canvas不具有自己的行為，只將一組API 展現給客戶端 JavaScript ，讓開發者使用腳本把想繪制的東西畫到一張畫布上。
在HTML5之前，人們通常使用SVG來在頁面上繪制出圖形。SVG使用XML來定義圖形，就像使用HTML標簽和樣式定義DIV一樣，我們也可以將一個空白的DIV想象為長方形的SVG，兩者的設計思想是相通的，SVG的本質就是一個DOM元素。而Canvas則不同，Canvas提供的是 JavaScript 的繪圖 API，而不是像 SVG那樣使用XML 描述繪圖，通過JavaScript API直接完成繪制，比起修改XML來說要更簡便、更直接。
除了定義的方式不同，Canvas和DOM（當然也包含SVG）的差異更多的體現在瀏覽器的渲染方式上。
瀏覽器在做頁面渲染時，Dom元素是作為矢量圖進行渲染的。每一個元素的邊距都需要單獨處理，瀏覽器需要將它們全都處理成像素才能輸出到屏幕上，計算量十分龐大。當頁面上內容非常多，存在大量DOM元素的時候，這些內容的渲染速度就會變得很慢。
而Canvas與DOM的區別則是Canvas的本質就是一張位圖，類似img標簽，或者一個div加了一張背景圖（background-image）。所以，DOM那種矢量圖在渲染中存在的問題換到Canvas身上就完全不同了。在渲染Canvas時，瀏覽器只需要在JavaScript引擎中執行繪制邏輯，在內存中構建出畫布，然后遍歷整個畫布里所有像素點的顏色，直接輸出到屏幕就可以了。不管Canvas里面的元素有多少個，瀏覽器在渲染階段也僅需要處理一張畫布。
然而這樣更加強大的功能，不可避免的讓使用canvas渲染有很高的門檻。Google Docs在構建Canvas的過程中重新定義了往常已經被人們所熟悉的內容，例如精確定位、文本選擇、拼寫檢查、重畫調優等。為什么更多開發者還是選擇了接納Canvas這個門檻更高的技術路線呢？這就得回到Canvas的最大優勢：渲染性能。
這里的渲染是指瀏覽器將頁面的代碼呈現為屏幕上內容的過程。Canvas和Dom的渲染模式完全不同，搞清楚這個差異對理解Canvas的性能優勢至關重要。
Dom：駐留模式
駐留模式（Retained Mode）是Dom在瀏覽器中的渲染模式。下圖粗略展示了這一過程的工作流程。
DOM的核心是標簽，一種文本標記型語言，多樣性很強且多個標簽之間存在各種關聯（如在同一個DIV下設置為float的子DIV）。瀏覽器為了更好的處理這些DOM元素，減少對繪制API的調用，就設計了一套將中間結果存放于內存的“駐留模式”。首先，瀏覽器會將解析DOM相關的全部內容（包含HTML標簽、樣式和JavaScript），將其轉化為場景（scene）和模型（model）存儲到內存中，然后再調用系統的繪制API（如Windows程序員熟悉的GDI/GDI+），把這些中間產物繪制到屏幕。
駐留模式通過場景和模型緩存減少了對繪制API的調用頻次，將性能壓力轉移到場景和模型生成階段，即瀏覽器需要根據DOM上下文和BOM中的尺寸數據，“自行判斷”每一個元素的繪制結果。
Canvas：快速模式
Canvas采用了和DOM不同的快速模式（Immediate Mode），讓我們先來看看快速模式是如工作的：
與駐留模式相比，快速模式將場景和模型的生成從瀏覽器移交給了開發者。開發者在設計頁面時，就通過Canvas的JavaScript API定義了畫布內所有元素的繪制方式。瀏覽器只需要簡單的執行這些腳本即可，而不需要像渲染DOM一樣逐個處理子元素了。
在快速模式中，頁面的繪制性能得到了大幅提升。但開發者不僅需要指定什么需要畫，還要創建和維護一個模型。此外，開發者還需要管理好當前場景重繪時帶來的改變，以及響應用戶的點擊或輸入操作等。
上面介紹的兩種不同的模式直接造成了Dom和Canvas的性能差異。對于使用快速模式渲染的Canvas而言，瀏覽器的每次重繪都是基于代碼的，不存在能讓處理流程變慢的多層解析，所以它真的很快。除了快之外，Canvas的靈活性也大大超出DOM。我們可以通過代碼精確的控制如何、何時繪制出我們想要的效果。
在資源消耗上，DOM的駐留模式意味著場景中每增加一點東西就需要額外消耗一些內存，而Canvas并沒有這個問題。這個差異會隨著頁面元素的數量增多而愈加明顯。以B端的企業應用場景為例，表單那種數據量比較小的場景，不同渲染模式帶來的效果差異并不明顯；但在工業制造、金融財會等類Excel電子表格操作的場景下，單元格數量動輒便是上百萬（5萬行x 20列）甚至上億個，瀏覽器需要對表格所有單元格本身內容進行渲染，同時還涉及到豐富的數據處理，情況就完全不同了。
（Web頁面上的電子表格，包含1百萬個單元格）
在Canvas出現之前，在前端渲染表格時只能通過構建復雜的DOM來實現。這種方式下，瀏覽器的性能成為了Web應用瓶頸，讓很多開發者放棄了在瀏覽器上實現電子表格的想法。
在Canvas出現后，快速模式帶來的性能優勢無疑是一個巨大的亮點，大量、復雜的DOM渲染處理帶來的性能問題終于有了解決途徑。
回到電子表格的應用場景，業內已經出現了使用Canvas繪制畫布的表格組件，這類組件在渲染數據層時不僅無需重復創建和銷毀DOM元素，在畫布的繪制過程中，也比Dom元素渲染的限制更少。除了表格之外，Canvas也為數字孿生可視化大屏、頁面游戲等場景帶來了變革。
（數字孿生大屏，精確控制各種形狀、樣式）
總結一下，在渲染模式上，Canvas站在了DOM的對面，瀏覽器對其內容一無所知，一切渲染的權利回到了開發者的手上，這個改變帶來了顯著的性能優勢。此外，我們可以使用Canvas繪制種類更為豐富的UI元素，如線形、特殊圖形等，通過畫法邏輯，還可以實現更加精準的UI界面渲染，解決了瀏覽器差異造成的樣式誤差，讓更多應用場景可以順利遷移到Web平臺上來。
為一名前端攻城獅，Canvas 和 SVG 對于我們并不陌生，canvas 是 HTML5 提供的新元素，而 svg 存在的時間要比 canvas 長很多，svg 并不屬于 html，最初的 svg 是由 XML 定義的，在 html 5 中 canvas 與 svg 看著相似，其實不同。
Canvas
SVG
2.1、功能上來說
canvas 是一個畫布，繪制出來的圖形是位圖，因此 canvas 可以繪制圖片，在實際應用中，由于渲染性能高，所以大型游戲開發都用的 canvas 。除此之外，還有統計中常見的柱狀圖、餅圖、雷達圖等也使用的 canvas 。而 svg 繪制的是矢量圖，放大后不會失真，所以很適合做地圖。
2.2、操作方面講
canvas 繪制的圖形，只能給 canvas 整個畫布添加事件，而不能給某個圖形或文件添加事件處理器，但是 svg 支持事件綁定，如果需要添加帶有事件的動畫效果時，就需要選擇 svg。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
