- 1 基本用法
要使用“<“canvas>元素街州，必須先設(shè)置其 width 和 height 屬性一疯，指定可以繪圖的區(qū)域大小灰粮。出現(xiàn)在 開始和結(jié)束標簽中的內(nèi)容是后備信息隶校，如果瀏覽器不支持”<“canvas>元素漏益，就會顯示這些信息。下面就 是“<”canvas>元素的例子深胳。
“<”canvas id="drawing" width=" 200" height="200">A drawing of something.“<”/canvas>
與其他元素一樣遭庶，“<”canvas>元素對應(yīng)的 DOM元素對象也有 width 和 height 屬性，可以隨意修 改稠屠。而且，也能通過 CSS為該元素添加樣式翎苫，如果不添加任何樣式或者不繪制任何圖形权埠，在頁面中是看 不到該元素的。
要在這塊畫布（canvas）上繪圖煎谍，需要取得繪圖上下文攘蔽。而取得繪圖上下文對象的引用，需要調(diào)用 getContext()方法并傳入上下文的名字呐粘。傳入"2d"满俗，就可以取得 2D上下文對象转捕。
在使用“<”canvas>元素之前，首先要檢測 getContext()方法是否存在唆垃，這一步非常重要五芝。有些瀏 覽器會為 HTML規(guī)范之外的元素創(chuàng)建默認的 HTML元素對象。在這種情況下辕万，即使 drawing 變量中 保存著一個有效的元素引用枢步，也檢測不到 getContext()方法。
使用 toDataURL()方法渐尿，可以導(dǎo)出在“<”canvas>元素上繪制的圖像醉途。這個方法接受一個參數(shù)，即圖 像的 MIME類型格式砖茸，而且適合用于創(chuàng)建圖像的任何上下文隘擎。 - 2 2D上下文
使用 2D繪圖上下文提供的方法，可以繪制簡單的 2D圖形凉夯，比如矩形货葬、弧線和路徑。2D上下文的 坐標開始于<canvas>元素的左上角恍涂，原點坐標是(0,0)宝惰。所有坐標值都基于這個原點計算，x值越大表示 越靠右再沧，y值越大表示越靠下尼夺。默認情況下，width 和 height 表示水平和垂直兩個方向上可用的像素 數(shù)目 - 2.1 填充和描邊
2D 上下文的兩種基本繪圖操作是填充和描邊炒瘸。填充淤堵，就是用指定的樣式（顏色、漸變或圖像）填 充圖形顷扩；描邊拐邪，就是只在圖形的邊緣畫線。大多數(shù) 2D上下文操作都會細分為填充和描邊兩個操作隘截，而操作的結(jié)果取決于兩個屬性：fillStyle 和 strokeStyle扎阶。
這兩個屬性的值可以是字符串、漸變對象或模式對象婶芭，而且它們的默認值都是"#000000"东臀。如果為 它們指定表示顏色的字符串值，可以使用 CSS 中指定顏色值的任何格式犀农，包括顏色名惰赋、十六進制碼、 rgb呵哨、rgba赁濒、hsl 或 hsla - 2.2 繪制矩形
矩形是唯一一種可以直接在 2D 上下文中繪制的形狀轨奄。與矩形有關(guān)的方法包括 fillRect()、 strokeRect()和 clearRect()拒炎。這三個方法都能接收 4個參數(shù)：矩形的 x坐標挪拟、矩形的 y坐標、矩形 寬度和矩形高度枝冀。這些參數(shù)的單位都是像素舞丛。 - 2.3 繪制路徑
2D 繪制上下文支持很多在畫布上繪制路徑的方法。通過路徑可以創(chuàng)造出復(fù) 雜的形狀和線條果漾。要繪制路徑球切，首先必須調(diào)用 beginPath()方法，表示要開始 繪制新路徑绒障。然后吨凑，再通過調(diào)用下列方法來實際地繪制路徑。
arc(x, y, radius, startAngle, endAngle, counterclockwise)：以(x,y)為圓心繪 制一條弧線户辱，弧線半徑為 radius鸵钝，起始和結(jié)束角度（用弧度表示）分別為 startAngle 和 endAngle。后一個參數(shù)表示 startAngle 和 endAngle 是否按逆時針方向計算庐镐，值為 false 表示按順時針方向計算恩商。
arcTo(x1, y1, x2, y2, radius)：從上一點開始繪制一條弧線，到(x2,y2)為止必逆，并且以 給定的半徑 radius 穿過(x1,y1)怠堪。
bezierCurveTo(c1x, c1y, c2x, c2y, x, y)：從上一點開始繪制一條曲線，到(x,y)為 止名眉，并且以(c1x,c1y)和(c2x,c2y)為控制點粟矿。
lineTo(x, y)：從上一點開始繪制一條直線，到(x,y)為止损拢。
moveTo(x, y)：將繪圖游標移動到(x,y)陌粹，不畫線。
quadraticCurveTo(cx, cy, x, y)：從上一點開始繪制一條二次曲線福压，到(x,y)為止掏秩，并 且以(cx,cy)作為控制點。
rect(x, y, width, height)：從點(x,y)開始繪制一個矩形荆姆，寬度和高度分別由 width 和 height 指定蒙幻。這個方法繪制的是矩形路徑，而不是 strokeRect()和 fillRect()所繪制的獨 立的形狀胞枕。
創(chuàng)建了路徑后，接下來有幾種可能的選擇魏宽。如果想繪制一條連接到路徑起點的線條腐泻，可以調(diào)用 closePath()决乎。如果路徑已經(jīng)完成，你想用 fillStyle 填充它派桩，可以調(diào)用 fill()方法构诚。另外，還可 以調(diào)用 stroke()方法對路徑描邊铆惑，描邊使用的是 strokeStyle范嘱。后還可以調(diào)用 clip()，這個方法 可以在路徑上創(chuàng)建一個剪切區(qū)域员魏。 - 2.4 繪制文本
文本與圖形總是如影隨形丑蛤。為此，2D 繪圖上下文也提供了繪制文本的方法撕阎。繪制文本主要有兩個 方法：fillText()和 strokeText()受裹。這兩個方法都可以接收 4 個參數(shù)：要繪制的文本字符串、x 坐 標虏束、y坐標和可選的大像素寬度棉饶。而且，這兩個方法都以下列 3個屬性為基礎(chǔ)镇匀。
font：表示文本樣式照藻、大小及字體，用 CSS中指定字體的格式來指定汗侵，例如"10px Arial"幸缕。
textAlign：表示文本對齊方式』卧瘢可能的值有"start"冀值、"end"、"left"宫屠、"right"和"center"列疗。 建議使用"start"和"end"，不要使用"left"和"right"浪蹂，因為前兩者的意思更穩(wěn)妥抵栈，能同時 適合從左到右和從右到左顯示（閱讀）的語言。
textBaseline：表示文本的基線坤次」啪ⅲ可能的值有"top"、"hanging"缰猴、"middle"产艾、"alphabetic"、 "ideographic"和"bottom"。
這幾個屬性都有默認值闷堡，因此沒有必要每次使用它們都重新設(shè)置一遍值隘膘。fillText()方法使用 fillStyle 屬性繪制文本，而 strokeText()方法使用 strokeStyle 屬性為文本描邊杠览。相對來說弯菊，還 是使用 fillText()的時候更多，因為該方法模仿了在網(wǎng)頁中正常顯示文本 - 2.5 變換
通過上下文的變換踱阿，可以把處理后的圖像繪制到畫布上管钳。2D繪制上下文支持各種基本的繪制變換。 創(chuàng)建繪制上下文時软舌，會以默認值初始化變換矩陣才漆，在默認的變換矩陣下，所有處理都按描述直接繪制葫隙。 為繪制上下文應(yīng)用變換栽烂，會導(dǎo)致使用不同的變換矩陣應(yīng)用處理，從而產(chǎn)生不同的結(jié)果恋脚。 可以通過如下方法來修改變換矩陣腺办。
rotate(angle)：圍繞原點旋轉(zhuǎn)圖像 angle 弧度。
scale(scaleX, scaleY)：縮放圖像糟描，在 x方向乘以 scaleX怀喉，在 y方向乘以 scaleY。scaleX 和 scaleY 的默認值都是 1.0船响。
translate(x, y)：將坐標原點移動到(x,y)躬拢。執(zhí)行這個變換之后，坐標(0,0)會變成之前由(x,y) 表示的點见间。
transform(m1_1, m1_2, m2_1, m2_2, dx, dy)：直接修改變換矩陣
setTransform(m1_1, m1_2, m2_1, m2_2, dx, dy)：將變換矩陣重置為默認狀態(tài)聊闯，然后 再調(diào)用 transform() - 2.6 繪制圖像
2D繪圖上下文內(nèi)置了對圖像的支持。如果你想把一幅圖像繪制到畫布上米诉，可以使用 drawImage() 方法菱蔬。根據(jù)期望的終結(jié)果不同，調(diào)用這個方法時史侣，可以使用三種不同的參數(shù)組合拴泌。簡單的調(diào)用方式 是傳入一個 HTML <img>元素，以及繪制該圖像的起點的 x和 y坐標惊橱。 - 2.7 陰影
2D上下文會根據(jù)以下幾個屬性的值蚪腐，自動為形狀或路徑繪制出陰影。
shadowColor：用 CSS顏色格式表示的陰影顏色税朴，默認為黑色回季。
shadowOffsetX：形狀或路徑 x軸方向的陰影偏移量家制，默認為 0。
shadowOffsetY：形狀或路徑 y軸方向的陰影偏移量泡一，默認為 0慰丛。
shadowBlur：模糊的像素數(shù)，默認 0瘾杭，即不模糊 - 2.8 漸變
漸變由 CanvasGradient 實例表示，很容易通過 2D上下文來創(chuàng)建和修改哪亿。要創(chuàng)建一個新的線性漸 變粥烁，可以調(diào)用 createLinearGradient()方法。這個方法接收 4個參數(shù)：起點的 x坐標蝇棉、起點的 y坐 標讨阻、終點的 x 坐標、終點的 y 坐標篡殷。調(diào)用這個方法后钝吮，它就會創(chuàng)建一個指定大小的漸變，并返回 CanvasGradient 對象的實例板辽。
創(chuàng)建了漸變對象后奇瘦，下一步就是使用 addColorStop()方法來指定色標。這個方法接收兩個參數(shù)： 色標位置和 CSS顏色值劲弦。色標位置是一個 0（開始的顏色）到 1（結(jié)束的顏色）之間的數(shù)字耳标。 - 2.9 模式
模式其實就是重復(fù)的圖像，可以用來填充或描邊圖形邑跪。要創(chuàng)建一個新模式次坡，可以調(diào)用 createPattern()方法并傳入兩個參數(shù)：一個 HTML <img>元素和一個表示如何重復(fù)圖像的字符串。 其中画畅，第二個參數(shù)的值與 CSS的 background-repeat 屬性值相同砸琅，包括"repeat"、"repeat-x"轴踱、 "repeat-y"和"no-repeat" - 2.10 使用圖像數(shù)據(jù)
2D上下文的一個明顯的長處就是症脂，可以通過 getImageData()取得原始圖像數(shù)據(jù)。這個方法接收 4個參數(shù)：要取得其數(shù)據(jù)的畫面區(qū)域的 x和 y坐標以及該區(qū)域的像素寬度和高度寇僧。 - 2.11 合成
還有兩個會應(yīng)用到 2D 上下文中所有繪制操作的屬性：globalAlpha 和 globalComposition- Operation摊腋。其中，globalAlpha 是一個介于 0和 1之間的值（包括 0和 1）嘁傀，用于指定所有繪制的透 明度兴蒸。默認值為 0上枕。如果所有后續(xù)操作都要基于相同的透明度般眉，就可以先把 globalAlpha 設(shè)置為適當(dāng) 值转晰，然后繪制，后再把它設(shè)置回默認值 0吏祸。
第二個屬性 globalCompositionOperation 表示后繪制的圖形怎樣與先繪制的圖形結(jié)合。這個 屬性的值是字符串徘钥，可能的值如下
source-over（默認值）：后繪制的圖形位于先繪制的圖形上方派殷。
source-in：后繪制的圖形與先繪制的圖形重疊的部分可見，兩者其他部分完全透明坚踩。
source-out：后繪制的圖形與先繪制的圖形不重疊的部分可見荡灾，先繪制的圖形完全透明。
source-atop：后繪制的圖形與先繪制的圖形重疊的部分可見瞬铸，先繪制圖形不受影響批幌。
destination-over：后繪制的圖形位于先繪制的圖形下方，只有之前透明像素下的部分才可見嗓节。
destination-in：后繪制的圖形位于先繪制的圖形下方荧缘，兩者不重疊的部分完全透明。
destination-out：后繪制的圖形擦除與先繪制的圖形重疊的部分拦宣。
destination-atop：后繪制的圖形位于先繪制的圖形下方截粗，在兩者不重疊的地方，先繪制的圖形會變透明鸵隧。
ighter：后繪制的圖形與先繪制的圖形重疊部分的值相加绸罗，使該部分變亮。
copy：后繪制的圖形完全替代與之重疊的先繪制圖形豆瘫。
xor：后繪制的圖形與先繪制的圖形重疊的部分執(zhí)行“異或”操作从诲。 - 3 WebGL
WebGL是針對 Canvas的 3D上下文。與其他 Web 技術(shù)不同靡羡，WebGL并不是 W3C制定的標準系洛，而 是由 Khronos Group制定的。其官方網(wǎng)站是這樣介紹的：“Khronos Group是一個非盈利的由會員資助的 協(xié)會略步，專注于為并行計算以及各種平臺和設(shè)備上的圖形及動態(tài)媒體制定無版稅的開放標準描扯。 ” Khronos Group也設(shè)計了其他圖形處理 API，比如 OpenGL ES 2.0趟薄。瀏覽器中使用的 WebGL就是基于 OpenGL ES 2.0制定的绽诚。 OpenGL等 3D圖形語言是非常復(fù)雜的，本書不可能介紹其中每一個概念杭煎。熟悉 OpenGL ES 2.0的讀 者可能會覺得 WebGL更好理解一些恩够，因為好多概念是相通的。 - 3.1 類型化數(shù)組
WebGL涉及的復(fù)雜計算需要提前知道數(shù)值的精度羡铲，而標準的 JavaScript數(shù)值無法滿足需要蜂桶。為此，WebGL引入了一個概念也切，叫類型化數(shù)組（typed arrays）扑媚。類型化數(shù)組也是數(shù)組腰湾，只不過其元素被設(shè)置為 特定類型的值。 類型化數(shù)組的核心就是一個名為 ArrayBuffer 的類型疆股。每個 ArrayBuffer 對象表示的只是內(nèi)存 中指定的字節(jié)數(shù)费坊，但不會指定這些字節(jié)用于保存什么類型的數(shù)據(jù)。通過 ArrayBuffer 所能做的旬痹，就是 為了將來使用而分配一定數(shù)量的字節(jié)附井。 - 3.2 WebGL上下文
目前，在支持的瀏覽器中两残，WebGL 的名字叫"experimental-webgl"羡忘，這是因為 WebGL 規(guī)范仍 然未制定完成。制定完成后磕昼，這個上下文的名字就會變成簡單的"webgl"。如果瀏覽器不支持 WebGL节猿， 那么取得該上下文時會返回 null票从。在使用 WebGL上下文時，務(wù)必先檢測一下返回值滨嘱。
通過給 getContext()傳遞第二個參數(shù)峰鄙，可以為 WebGL上下文設(shè)置一些選項。這個參數(shù)本身是一 個對象太雨，可以包含下列屬性吟榴。
alpha：值為 true，表示為上下文創(chuàng)建一個 Alpha通道緩沖區(qū)囊扳；默認值為 true吩翻。
depth：值為 true，表示可以使用 16位深緩沖區(qū)锥咸；默認值為 true狭瞎。
stencil：值為 true，表示可以使用 8位模板緩沖區(qū)搏予；默認值為 false熊锭。
antialias：值為 true，表示將使用默認機制執(zhí)行抗鋸齒操作雪侥；默認值為 true碗殷。
premultipliedAlpha：值為 true，表示繪圖緩沖區(qū)有預(yù)乘 Alpha值速缨；默認值為 true锌妻。
preserveDrawingBuffer：值為 true，表示在繪圖完成后保留繪圖緩沖區(qū)旬牲；默認值為 false从祝。
用canvas繪圖
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
- 文/潘曉璐 我一進店門仿吞，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人捡偏，你說我怎么就攤上這事唤冈。” “怎么了银伟？”我有些...
- 文/不壞的土叔 我叫張陵你虹，是天一觀的道長。 經(jīng)常有香客問我彤避，道長傅物，這世上最難降的妖魔是什么？ 我笑而不...
- 正文 為了忘掉前任琉预，我火速辦了婚禮董饰，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘圆米。我一直安慰自己卒暂，他們只是感情好，可當(dāng)我...
- 文/花漫 我一把揭開白布娄帖。 她就那樣靜靜地躺著介却，像睡著了一般。 火紅的嫁衣襯著肌膚如雪块茁。 梳的紋絲不亂的頭發(fā)上齿坷，一...
- 文/蒼蘭香墨 我猛地睜開眼干厚，長吁一口氣：“原來是場噩夢啊……” “哼李滴！你這毒婦竟也來了螃宙？” 一聲冷哼從身側(cè)響起，我...
- 正文 年R本政府宣布酣倾，位于F島的核電站，受9級特大地震影響慰照，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜琉朽，卻給世界環(huán)境...
- 文/蒙蒙 一毒租、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧箱叁，春花似錦墅垮、人聲如沸。這莊子的主人今日做“春日...
- 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至螟够，卻和暖如春灾梦，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背妓笙。 一陣腳步聲響...
推薦閱讀更多精彩內(nèi)容
- ??HTML5 添加的最受歡迎的功能就是 元素悟民。這個元素負責(zé)在頁面中設(shè)定一個區(qū)域坝辫，然后就可以通過 JavaScri...
- 1 基本用法 要使用 元素，必須先設(shè)置其 width 和 height 屬性逾雄，指定可以繪圖的區(qū)域大小阀溶。出現(xiàn)在 開始...
- 元素負責(zé)在頁面中設(shè)定一個區(qū)域，然后就可以通過 JavaScript 動態(tài)地在這個區(qū)域中繪制圖形鸦泳。 一银锻、基本用法 要...
- 本章內(nèi)容 理解 元素 繪制簡單的 2D 圖形 使用 WebGL 繪制 3D 圖形 這個元素負責(zé)在頁面中設(shè)定一個區(qū)域...
- 第15章 使用 Canvas 繪圖 1. 基本用法 (1) 要使用 元素,必須先設(shè)置其width和 height ...
