如何用Canvas繪製多種圖形(詳解)

講一講 Canvas 究竟是個啥

HTML5 的標準已經出來好久了,但是似乎其中的 Canvas 現在並沒有在太多的地方用到。一個很重要的原因是,Canvas 的標準還沒有完全確定,不適合大規模用在生產環境。但是,Canvas 的優點也是很明顯的,例如在繪製含有大量元素的圖表的時候,SVG 往往因為性能問題而無法勝任,例如我見過的一次技術分享會的抽獎環節,雖然效果比較炫,但因為每個頭像都是 DOM,利用 CSS3 控制的動畫,導致了性能非常低下。此外,隨著硬體性能的提高,視頻截圖、圖像處理等功能也逐漸可以在網頁上實現了,大多數網站用的是 Flash,但是 Flash 在 Mac 電腦上性能不高,還需要學一些額外的知識。Canvas 則是直接使用 JavaScript 來進行繪圖,對 Mac 友好,所以不失為 Flash 的一個繼承者。

使用 Canvas

說了這麼多,Canvas 究竟是個啥?

英文中 Canvas 的意思是「畫布」,不過這裡說的 Canvas 是 HTML5 中新出的一個元素,開發者可以在上面繪製一系列圖形。Canvas 在 HTML 文件中的寫法很簡單:

<canvas id="canvas" width_="寬度" height="高度"></canvas>

其中 id 屬性是所有 HTML 元素都可以用的,Canvas 自帶的屬性只有後面兩個(分別控制寬度、高度),沒有其它的了。至於兼容性,CanIUse 上面寫了,基礎的功能目前用戶使用的 90% 的瀏覽器都支持,所以大部分情況下還是可以放心使用的。

注意,一定要使用 Canvas 自帶的 width 和 height 屬性,不要使用 CSS 來控制,因為 CSS 控制會導致 Canvas 變形。可以試著與 PhptpShop 對比一下,後者是改變「圖像大小」,前者才是正確的改變「畫布大小」。例如下圖是三張圖片的橫向拼接:最左邊的黑框中是大小為 50px * 50px 的原圖;中間是改變了圖像大小為 100px * 100px 的效果,圖像變得模糊,但是對於圖像本身來說坐標範圍並沒有變大;最右邊才是正確的 100px * 100px 的 Canvas。

Canvas 絕大部分的繪圖方法都與 <canvas> 標籤無關,需要使用 JavaScript 對其進行操作,這就是所謂的 Canvas API。

我們首先獲取到這個元素:

var canvas = document.getElementById(canvas);

然後通過一個方法來獲取可以調用一切 Canvas API 的入口:

var ctx = canvas.getContext(2d);

看到 2d 是不是很激動地聯想到有沒有 3d 呢?沒有 3d 的寫法,不過如果想要開啟 3D 世界的大門,則可以寫 canvas.getContext(webgl)。然而 WebGL 是基於 OpenGL ES 2.0 的一套標準,與本文是徹徹底底的兩條路,因此這裡就不討論了。

Canvas 中的基本概念

坐標

與數學上常見的笛卡爾坐標系不太相同,Canvas 的坐標系是計算機中常見的坐標系,它長這樣:

畫布的最左上角是 (0,0),往右 x 增大,往下 y 增大,而且 x 和 y 都是整數(就算在計算過程中不是整數,在繪製的時候也會當作整數處理),單位是像素。

繪圖

帶大家懷舊一下。不知道有多少同學小時候玩過 logo 語言,在裡面你可以控制一隻小海龜在一塊板子上行走、畫畫、提筆、落筆。Canvas 中也一樣,你需要控制一隻畫筆的移動和繪製。然而 Canvas 更高級一些,你可以直接利用一些函數來畫圖,不用去控制那隻畫筆的位置。

Canvas 中的基本圖形

通過上文定義的 ctx 變數可以干許多有意思的事情,我們先看看如何繪製一些基本圖形。

線條

我們指定畫筆移動到某一點,然後告訴畫筆需要從當前這一點畫到另一點。我們可以讓畫筆多次移動、繪製,最後統一輸出到屏幕上。例子如下:

ctx.moveTo(10, 10);ctx.lineTo(150, 50);ctx.lineTo(10, 50);ctx.moveTo(10, 20);ctx.lineTo(40, 70);ctx.stroke();

上面的代碼中,lineTo 是產生線條用的函數,執行完之後畫筆就移到了線條的終點。需要注意的是,線條此時並沒有顯示在屏幕上,必須調用 stroke 才會顯示。這樣設計是有道理的,因為向屏幕上輸出內容需要耗費大量的資源,我們完全可以先攢夠一波 lineTo,最後用 stroke 放一個大的。

路徑

繪製路徑非常簡單,只需要先告訴 ctx 一聲「我要開始畫路徑了」,然後通過各種方法(例如 lineTo)繪製路徑。如果需要畫一個封閉路徑,那就最後告訴 ctx一聲:「我畫完了,你把它封閉起來吧。」當然,不要忘記利用 stroke 輸出到屏幕上。

一個簡單的例子:

ctx.beginPath();ctx.moveTo(10, 10);ctx.lineTo(150, 50);ctx.lineTo(10, 50);ctx.closePath();ctx.stroke();

如果我不想只描繪路徑線條,而是想填充整個路徑呢?可以將最後一行的 stroke 改成 fill,這樣就跟使用了畫圖中的油漆桶一樣,封閉路徑裡面的內容就都被填充上顏色了:

ctx.fill();

弧 / 圓形

繪製弧的函數參數比較多:

ctx.arc(圓心 x 坐標, 圓心 y 坐標, 半徑, 起始角度, 終止角度, 是否為逆時針);

注意,在 Canvas 的坐標系中,角的一邊是以圓心為中心的水平向右的直線。角度單位均為弧度。例如下圖,確定了圓心、起始角度(圖中標明的銳角)和終止角度(圖中標明的鈍角),方向為逆時針,於是就有了這麼一個弧。如果方向為順時針,那麼就會是一個跟它互補的、非常非常大的弧……

所以如果轉了 2π 圈之後,弧就成了圓形,因此也可以使用繪製弧的方式來繪製圓形:

ctx.beginPath();ctx.arc(圓心 x 坐標, 圓心 y 坐標, 半徑, 0, Math.PI * 2, true);ctx.closePath();

最後一個參數隨便填(當然也可以不填),因為不管是順時針還是逆時針,轉了 2π 圈之後都是一個圓。

矩形

如果只是想繪製一個橫平豎直的矩形,可以使用下面的兩個方法:

// 只描邊ctx.strokeRect(左上角 x 坐標, 左上角 y 坐標, 寬度, 高度);// 只填充ctx.fillRect(左上角 x 坐標, 左上角 y 坐標, 寬度, 高度);

線條樣式 / 填充樣式

之前繪製的所有圖形都是黑色的,但是 Canvas 肯定不止這麼一種顏色(不然標準的制定者會被噴的很慘)。事實上,Canvas 可以單獨設置線條樣式和填充樣式,分別使用的是 strokeStyle 和 fillStyle。可能的值有三種:純色、漸變、圖像。既然線條樣式與填充樣式的使用方法相同,那麼下面統一以填充樣式為例。如果想設置線條樣式,直接將所有的 fillStyle改成 strokeStyle 即可,裡面的參數都不變。

/* 純色填充 */// 普通的顏色ctx.fillStyle = #0000ff;// 帶有透明度的顏色ctx.fillStyle = rgba(64, 0, 127, 0.5);/* 漸變填充 */// 設置漸變的尺寸(參數分別為起始點的 x 和 y、終止點的 x 和 y)var gradient = ctx.createLinearGradient(0, 0, 170, 0);// 設置過渡色,第一個參數是漸變的位置,第二個參數是顏色gradient.addColorStop(0, magenta);gradient.addColorStop(0.5, blue);gradient.addColorStop(1.0, red);// 設置填充樣式ctx.fillStyle = gradient;/* 圖片填充 */// 創建圖片var image = new Image;image.src = /path/to/image.png;// 創建圖片筆觸,可以指定圖片的平鋪方式,這裡是橫向平鋪var pattern = ctx.createPattern(image, repeat-x);// 設置筆觸填充ctx.fillStyle = pattern;

關於漸變,除了代碼中提到的線性漸變以外,還有 createRadialGradient,也就是徑向漸變。

設置完填充樣式之後,就可以使用 fill 來填充啦!如果設置的是線條樣式,那麼就可以使用 stroke 來描邊。

當然,對於線條樣式,還有個額外的方法叫 lineWidth 可以用來控制線條的寬度。

文字

要想在畫布上畫文字,首先需要知道所使用的字體和字型大小:

ctx.font = 30px Verdana;

然後就可以通過 strokeText 或者 fillText 來對字體描邊或者填充字體。

ctx.strokeText("Hello Coding!", 23, 33);ctx.fillText("Hello Coding!", 23, 66);

圖片

在 Canvas 中繪製圖片有三種方法:

// 指定繪製位置ctx.drawImage(image, x, y);// 指定繪製位置和圖像寬高ctx.drawImage(image, x, y, width, height);// 指定剪裁區域、繪製位置和圖像寬高ctx.drawImage(image, sx, sy, swidth, sheight, x, y, width, height);

參數的含義依次如下:

image: 要使用的 Image、Canvas 或 Videosx: 可選,開始剪切的 x 坐標sy: 可選,開始剪切的 y 坐標swidth: 可選,被剪切圖像的寬度sheight: 可選,被剪切圖像的高度x: 在畫布上放置圖像的 x 坐標y: 在畫布上放置圖像的 y 坐標width: 可選,要使用的圖像的寬度height: 可選,要使用的圖像的高度

畫布設置

細心的同學可能會發現,剛才有些屬性是直接對 ctx 變數做設置,例如 ctx.lineWidth,只要設置了它,那麼後續畫出來的線條全都是這麼個寬度。

其實,Canvas 的設置項還有許多,例如我們可以直接移動畫布、旋轉畫布、設置全局的繪製透明度等等。這些設置還可以隨時保存和恢復。

要注意的一點是,所有已經畫在畫布上的東西,是已經定死了的,不管之後再次進行任何設置都不會再改變。這個很像 Windows 下的畫圖程序。

廢話不多說,直接上代碼:

// 移動畫布,其實就是移動坐標系ctx.translate(往右移動的量, 往下移動的量);// 旋轉畫布,旋轉中心為坐標系原點ctx.rotate(順時針旋轉的角度);// 以坐標系原點為中心縮放畫布ctx.scale(橫向放大倍數, 縱向放大倍數);// 設置繪製透明度,如果 fillStyle 等屬性設置了透明度則會疊加ctx.globalAlpha(零到一的小數);// 設置全局組合操作ctx.globalCompositeOperation = lighter;// 保存當前設置ctx.save();// 恢復上次保存的設置ctx.restore();

移動、旋轉、縮放其實就是在控制繪圖的坐標系,如果你在調用這三個方法的時候,腦子裡時刻有一個帶刻度的坐標系,效果會非常好。

事實上,Canvas 的坐標變換遵循計算機圖形學的知識:變換矩陣。簡單來說,一個坐標可以看成是一個矩陣,坐標所對應的矩陣乘上變換矩陣就可以實現對坐標的變換。為了提升計算的效率,可以先計算出幾種變換複合之後的變換矩陣,然後直接通過 transform 函數對當前坐標系進行變換,或者通過 setTransform 函數將坐標系重置為初始狀態後再進行變換。至於變換矩陣的內容,對於本文來說就有些超綱了。

全局組合操作有點像 PhotoShop 裡面的「混合選項」,具體的實現方式還沒有完全確定,目前常見瀏覽器都統一了的實現方式有:source-over、source-atop、destination-over、destination-out、lighter、xor。具體的行為可以看 Mozilla 官方文檔,但是由於標準還未完全確定,因此其它瀏覽器不保證所有的行為都跟 Mozilla 的標準一致。一般來說,比較常見的是 source-over 和 lighter 兩種,這兩種的標準在瀏覽器界也算是無可爭議的。

至於保存和恢復設置就有點好玩了,首先需要了解一個叫「棧」的東西。

棧是一個一維數組,規定只能從一個方向操作。棧一開始是空的,我們可以從這個方向往數組 push 元素,也只能從這個方向把最後一個元素(棧頂元素)pop 出來,除此以外沒有任何多餘的操作。當然,pop 的次數不能多於 push 的次數,因為 pop 到棧底的時候棧里就已經沒有元素了,此時再 pop 是沒有意義的。棧的用處有很多,例如括弧匹配、表達式求值、深度優先搜索,甚至絕大部分語言的函數調用都要用到棧。

每次我們調用 save 函數,實際上是將當前的全局設置 push 到了一個專門棧上,每次調用 restore 函數的時候將最後一次保存的內容 pop 出來並用它覆蓋當前的全局設置,這樣棧頂就是最近一次保存的內容了。保存和恢復在某些情況下很好用,例如我需要畫一個歪著的圖形,然後繼續畫正著的圖形,這樣就可以先調用 save,然後調用 rotate,畫完圖形之後再 restore 回來,繼續畫其它的圖形。

其實 Canvas 還有許多方法,例如 toDataURL 直接將當前畫布上的內容轉換為十六進位的 data-url,getImageData直接將圖像轉換為 RGBA 數組以供圖像處理演算法使用,putImageData 將 RGBA 數組轉換為圖片顯示在畫布上等等。如果配上 JavaScript 的定時更新(最好用 requestAnimationFrame 而不是 setInterval),則可以產生動畫效果。網上還有許多 Canvas 的庫,可以讓程序員更簡便地基於 Canvas 編寫屬於自己的特效或功能。在這兒我想說一句話:大家的腦洞有多大,Canvas 的能力就有多強~

版權歸原作者所有。

原文鏈接:blog.coding.net/blog/wh


推薦閱讀:

ant-design-pro Authorized許可權組件設計
SVG 讓 UI 工程師早點回家陪媳婦
Amaze UI 定製化工具上線丨打造專屬於你的「妹子UI」
記一次前端面試
react和vue框架應該如何選擇?

TAG:前端開發 | Canvas | 編程學習 |