HTML 5 Canvas基礎(chǔ)學(xué)習(xí)教程（1）

anvas描述

HTML5 <canvas> 標(biāo)簽用于繪制圖像（通過腳本，通常是 JavaScript）。

不過，<canvas> 元素本身并沒有繪制能力（它僅僅是圖形的容器） - 您必須使用腳本來完成實(shí)際的繪圖任務(wù)。

getContext() 方法可返回一個(gè)對象，該對象提供了用于在畫布上繪圖的方法和屬性。

一般寫法：<canvas id="tutorial"width="150"height="150"></canvas>

（1）getContext()

getContext()用來獲得渲染上下文和它的繪畫功能,只有一個(gè)參數(shù)，目前只支持2d，即：

var canvas=document.getElementById('tutorial');
var ctx=canvas.getContext('2d');

getContext()可以用來檢測當(dāng)前瀏覽器是不是支持canvas，如果不支持可以用指定文本替代：

var canvas=document.getElementById('tutorial');
if (canvas.getContext){
var ctx=canvas.getContext('2d');// 支持
} else {
// 不支持，可以寫相關(guān)提示文字
}

案例：

<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>

效果：只是一個(gè)空畫布

（2）繪制矩形

canvas提供了四種方法繪制矩形

rect()： 創(chuàng)建矩形，僅僅創(chuàng)建并未畫出，仍需要fill或者stroke填充或者畫出來！

fillRect(x, y, width, height) 繪制一個(gè)填充的矩形

strokeRect(x, y, width, height) 繪制一個(gè)矩形的邊框

clearRect(x, y, width, height)清除指定矩形區(qū)域，讓清除部分完全透明。

例子：

function draw() {
var canvas=document.getElementById('canvas');
if (canvas.getContext) {
var ctx=canvas.getContext('2d');
ctx.fillRect(25,25,100,100);//繪制一個(gè)100*100矩形，默認(rèn)黑色
ctx.clearRect(45,45,60,60);//刪除一個(gè)60*60的矩形
ctx.strokeRect(50,50,50,50);//繪制一個(gè)50*50的邊框
}}

效果圖：

（3）繪制路徑

路徑繪制圖形需要的步驟：

1、首先，你需要?jiǎng)?chuàng)建路徑起始點(diǎn)。

2、然后你使用畫圖命令去畫出路徑。

3、之后你把路徑封閉。

4、一旦路徑生成，你就能通過描邊或填充路徑區(qū)域來渲染圖形。

通過以下常用函數(shù)來畫圖：

beginPath()新建一條路徑，生成之后，圖形繪制命令被指向到路徑上生成路徑。

closePath()閉合路徑之后圖形繪制命令又重新指向到上下文中。

stroke()通過線條來繪制圖形輪廓。

fill()通過填充路徑的內(nèi)容區(qū)域生成實(shí)心的圖形。

moveTo(x,y)將筆觸移動到指定的坐標(biāo)x以及y上。

lineTo(x, y)繪制一條從當(dāng)前位置到指定x以及y位置的直線。

arc(x, y, radius, startAngle, endAngle, anticlockwise)畫一個(gè)以（x,y）為圓心的以radius為半徑的圓弧（圓），從startAngle開始到endAngle結(jié)束，按照anticlockwise給定的方向（默認(rèn)為順時(shí)針）來生成。

arcTo(x1, y1, x2, y2, radius)根據(jù)給定的控制點(diǎn)和半徑畫一段圓弧，再以直線連接兩個(gè)控制點(diǎn)。

注意：注意：arc()函數(shù)中的角度單位是弧度，不是度數(shù)。角度與弧度的js表達(dá)式:radians=(Math.PI/180)*degrees。

例子1：繪制一個(gè)三角形

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：畫一個(gè)是描邊三角形。

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); // 口(順時(shí)針)
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為一個(gè)控制點(diǎn)，x,y為結(jié)束點(diǎn)。

bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)繪制三次貝塞爾曲線，cp1x,cp1y為控制點(diǎn)一，cp2x,cp2y為控制點(diǎn)二，x,y為結(jié)束點(diǎn)。

貝塞爾曲線圖：

二次貝塞爾曲線例子：、

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還有很多不錯(cuò)的功能，如果想學(xué)習(xí)，可以接續(xù)看我的后續(xù)教程.

委外待續(xù)....

oogle Docs宣布將會把HTML遷移到基于Canvas渲染，這一消息的出現(xiàn)再次把幾年前隨HTML5誕生的標(biāo)簽重新推到了人們視線之中。Canvas在剛推出時(shí)主打的優(yōu)勢就是更快的渲染速度，堪稱HTML屆的“小飛人”，刷新了人們對Web頁面元素繪制速度的印象。但Canvas的優(yōu)勢僅限于此嗎？

（圖片來源于網(wǎng)絡(luò)）

HTML繪圖屆的前輩：SVG

Canvas是HTML5時(shí)代引入的“新”標(biāo)簽。與很多標(biāo)簽不同，Canvas不具有自己的行為，只將一組API 展現(xiàn)給客戶端 JavaScript ，讓開發(fā)者使用腳本把想繪制的東西畫到一張畫布上。

在HTML5之前，人們通常使用SVG來在頁面上繪制出圖形。SVG使用XML來定義圖形，就像使用HTML標(biāo)簽和樣式定義DIV一樣，我們也可以將一個(gè)空白的DIV想象為長方形的SVG，兩者的設(shè)計(jì)思想是相通的，SVG的本質(zhì)就是一個(gè)DOM元素。而Canvas則不同，Canvas提供的是 JavaScript 的繪圖 API，而不是像 SVG那樣使用XML 描述繪圖，通過JavaScript API直接完成繪制，比起修改XML來說要更簡便、更直接。

除了定義的方式不同，Canvas和DOM（當(dāng)然也包含SVG）的差異更多的體現(xiàn)在瀏覽器的渲染方式上。

瀏覽器在做頁面渲染時(shí)，Dom元素是作為矢量圖進(jìn)行渲染的。每一個(gè)元素的邊距都需要單獨(dú)處理，瀏覽器需要將它們?nèi)继幚沓上袼夭拍茌敵龅狡聊簧希?jì)算量十分龐大。當(dāng)頁面上內(nèi)容非常多，存在大量DOM元素的時(shí)候，這些內(nèi)容的渲染速度就會變得很慢。

而Canvas與DOM的區(qū)別則是Canvas的本質(zhì)就是一張位圖，類似img標(biāo)簽，或者一個(gè)div加了一張背景圖（background-image）。所以，DOM那種矢量圖在渲染中存在的問題換到Canvas身上就完全不同了。在渲染Canvas時(shí)，瀏覽器只需要在JavaScript引擎中執(zhí)行繪制邏輯，在內(nèi)存中構(gòu)建出畫布，然后遍歷整個(gè)畫布里所有像素點(diǎn)的顏色，直接輸出到屏幕就可以了。不管Canvas里面的元素有多少個(gè)，瀏覽器在渲染階段也僅需要處理一張畫布。

然而這樣更加強(qiáng)大的功能，不可避免的讓使用canvas渲染有很高的門檻。Google Docs在構(gòu)建Canvas的過程中重新定義了往常已經(jīng)被人們所熟悉的內(nèi)容，例如精確定位、文本選擇、拼寫檢查、重畫調(diào)優(yōu)等。為什么更多開發(fā)者還是選擇了接納Canvas這個(gè)門檻更高的技術(shù)路線呢？這就得回到Canvas的最大優(yōu)勢：渲染性能。

Canvas的渲染模式

這里的渲染是指瀏覽器將頁面的代碼呈現(xiàn)為屏幕上內(nèi)容的過程。Canvas和Dom的渲染模式完全不同，搞清楚這個(gè)差異對理解Canvas的性能優(yōu)勢至關(guān)重要。

Dom：駐留模式

駐留模式（Retained Mode）是Dom在瀏覽器中的渲染模式。下圖粗略展示了這一過程的工作流程。

DOM的核心是標(biāo)簽，一種文本標(biāo)記型語言，多樣性很強(qiáng)且多個(gè)標(biāo)簽之間存在各種關(guān)聯(lián)（如在同一個(gè)DIV下設(shè)置為float的子DIV）。瀏覽器為了更好的處理這些DOM元素，減少對繪制API的調(diào)用，就設(shè)計(jì)了一套將中間結(jié)果存放于內(nèi)存的“駐留模式”。首先，瀏覽器會將解析DOM相關(guān)的全部內(nèi)容（包含HTML標(biāo)簽、樣式和JavaScript），將其轉(zhuǎn)化為場景（scene）和模型（model）存儲到內(nèi)存中，然后再調(diào)用系統(tǒng)的繪制API（如Windows程序員熟悉的GDI/GDI+），把這些中間產(chǎn)物繪制到屏幕。

駐留模式通過場景和模型緩存減少了對繪制API的調(diào)用頻次，將性能壓力轉(zhuǎn)移到場景和模型生成階段，即瀏覽器需要根據(jù)DOM上下文和BOM中的尺寸數(shù)據(jù)，“自行判斷”每一個(gè)元素的繪制結(jié)果。

Canvas：快速模式

Canvas采用了和DOM不同的快速模式（Immediate Mode），讓我們先來看看快速模式是如工作的：

與駐留模式相比，快速模式將場景和模型的生成從瀏覽器移交給了開發(fā)者。開發(fā)者在設(shè)計(jì)頁面時(shí)，就通過Canvas的JavaScript API定義了畫布內(nèi)所有元素的繪制方式。瀏覽器只需要簡單的執(zhí)行這些腳本即可，而不需要像渲染DOM一樣逐個(gè)處理子元素了。

在快速模式中，頁面的繪制性能得到了大幅提升。但開發(fā)者不僅需要指定什么需要畫，還要?jiǎng)?chuàng)建和維護(hù)一個(gè)模型。此外，開發(fā)者還需要管理好當(dāng)前場景重繪時(shí)帶來的改變，以及響應(yīng)用戶的點(diǎn)擊或輸入操作等。

Canvas的應(yīng)用優(yōu)點(diǎn)

上面介紹的兩種不同的模式直接造成了Dom和Canvas的性能差異。對于使用快速模式渲染的Canvas而言，瀏覽器的每次重繪都是基于代碼的，不存在能讓處理流程變慢的多層解析，所以它真的很快。除了快之外，Canvas的靈活性也大大超出DOM。我們可以通過代碼精確的控制如何、何時(shí)繪制出我們想要的效果。

在資源消耗上，DOM的駐留模式意味著場景中每增加一點(diǎn)東西就需要額外消耗一些內(nèi)存，而Canvas并沒有這個(gè)問題。這個(gè)差異會隨著頁面元素的數(shù)量增多而愈加明顯。以B端的企業(yè)應(yīng)用場景為例，表單那種數(shù)據(jù)量比較小的場景，不同渲染模式帶來的效果差異并不明顯；但在工業(yè)制造、金融財(cái)會等類Excel電子表格操作的場景下，單元格數(shù)量動輒便是上百萬（5萬行x 20列）甚至上億個(gè)，瀏覽器需要對表格所有單元格本身內(nèi)容進(jìn)行渲染，同時(shí)還涉及到豐富的數(shù)據(jù)處理，情況就完全不同了。

（Web頁面上的電子表格，包含1百萬個(gè)單元格）

在Canvas出現(xiàn)之前，在前端渲染表格時(shí)只能通過構(gòu)建復(fù)雜的DOM來實(shí)現(xiàn)。這種方式下，瀏覽器的性能成為了Web應(yīng)用瓶頸，讓很多開發(fā)者放棄了在瀏覽器上實(shí)現(xiàn)電子表格的想法。

在Canvas出現(xiàn)后，快速模式帶來的性能優(yōu)勢無疑是一個(gè)巨大的亮點(diǎn)，大量、復(fù)雜的DOM渲染處理帶來的性能問題終于有了解決途徑。

回到電子表格的應(yīng)用場景，業(yè)內(nèi)已經(jīng)出現(xiàn)了使用Canvas繪制畫布的表格組件，這類組件在渲染數(shù)據(jù)層時(shí)不僅無需重復(fù)創(chuàng)建和銷毀DOM元素，在畫布的繪制過程中，也比Dom元素渲染的限制更少。除了表格之外，Canvas也為數(shù)字孿生可視化大屏、頁面游戲等場景帶來了變革。

（數(shù)字孿生大屏，精確控制各種形狀、樣式）

總結(jié)

總結(jié)一下，在渲染模式上，Canvas站在了DOM的對面，瀏覽器對其內(nèi)容一無所知，一切渲染的權(quán)利回到了開發(fā)者的手上，這個(gè)改變帶來了顯著的性能優(yōu)勢。此外，我們可以使用Canvas繪制種類更為豐富的UI元素，如線形、特殊圖形等，通過畫法邏輯，還可以實(shí)現(xiàn)更加精準(zhǔn)的UI界面渲染，解決了瀏覽器差異造成的樣式誤差，讓更多應(yīng)用場景可以順利遷移到Web平臺上來。

為一名前端攻城獅，Canvas 和 SVG 對于我們并不陌生，canvas 是 HTML5 提供的新元素，而 svg 存在的時(shí)間要比 canvas 長很多，svg 并不屬于 html，最初的 svg 是由 XML 定義的，在 html 5 中 canvas 與 svg 看著相似，其實(shí)不同。

一、基本介紹

Canvas

通過 js 來繪制 2D圖形。
canvas 圖像單位是像素。
canvas 圖像繪制完畢之后，瀏覽器將不再關(guān)注它，如果位置發(fā)生變換，就需要重新繪制。

SVG

svg 使用 XML 描述的2D圖像。
svg 是基于 xml 的，所以 svg 中繪制圖形還是使用的元素，js 給元素任意添加事件。
svg 繪制的圖像是一個(gè)對象，如果對象的屬性發(fā)生改變，瀏覽器將重新繪制圖形。

二、SVG與Canvas比較

svg 是一種矢量圖，而 canvas 依賴于分辨率。所以 svg 放大不會失真，但是 canvas 繪制的圖形會失真。
svg 支持事件處理器，而 canvas 不支持事件處理器。
svg 中的文字獨(dú)立于圖像，文字可保留，可編輯和可搜索，canvas 的文本渲染能力弱。
canvas 適合圖像密集型的游戲，頻繁地重繪圖像，svg 繪制的復(fù)雜度高時(shí)減慢渲染的速度。
canvas 繪制的圖形可以多種格式 (jpg、png) 保存圖片，但是 svg 繪制的只能以 .svg 格式保存，使用時(shí)可以引入 html 文件。
canvas 適合開發(fā)游戲，svg 不適合游戲應(yīng)用。

二、如何應(yīng)用

2.1、功能上來說

canvas 是一個(gè)畫布，繪制出來的圖形是位圖，因此 canvas 可以繪制圖片，在實(shí)際應(yīng)用中，由于渲染性能高，所以大型游戲開發(fā)都用的 canvas 。除此之外，還有統(tǒng)計(jì)中常見的柱狀圖、餅圖、雷達(dá)圖等也使用的 canvas 。而 svg 繪制的是矢量圖，放大后不會失真，所以很適合做地圖。

2.2、操作方面講

canvas 繪制的圖形，只能給 canvas 整個(gè)畫布添加事件，而不能給某個(gè)圖形或文件添加事件處理器，但是 svg 支持事件綁定，如果需要添加帶有事件的動畫效果時(shí)，就需要選擇 svg。

在線咨詢

上一篇：使用JavaScript和Vue.js生成令人敬畏的
下一篇：AI時(shí)代，無需代碼，教你輕松制作游戲賺錢~

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商