當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

《Web前端开发精品课——HTML5 Canvas开发详解》——第一部分第二章节

發布時間：2024/3/24 HTML 31 豆豆

生活随笔收集整理的這篇文章主要介紹了《Web前端开发精品课——HTML5 Canvas开发详解》——第一部分第二章节小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

本節書摘來自異步社區《Web前端開發精品課——HTML5 Canvas開發詳解》一書中的第1部分，第2章，作者：莫振杰著，更多章節內容可以訪問云棲社區“異步社區”公眾號查看

第2章　直線圖形

2.1　直線圖形簡介

在Canvas中，基本圖形有兩種：①直線圖形；②曲線圖形。Canvas常見的直線圖形有三種，分另是直線、矩形、多邊形。

這一章我們先來學習Canvas中的直線圖形。

2.2　直線

2.2.1　Canvas坐標系
在學習Canvas之前，我們先來介紹一下Canvas中的坐標系是如何使用的。了解Canvas使用的坐標系是學習Canvas的最基本的前提。

我們經常見到的坐標系是數學坐標系，而Canvas使用的坐標系是W3C坐標系，這兩種坐標系唯一的區別在于y軸正方向的不同。

（1）數學坐標系：y軸正方向向上。

（2）W3C坐標系：y軸正方向向下。

注意：W3C坐標系的y軸正方向是向下的。很多小伙伴學到后面對Canvas一些代碼感到很困惑，那是因為他們沒有清楚地意識到這一點。

數學坐標系一般用于數學形式上的應用，而在前端開發中幾乎所有涉及坐標系的技術使用的都是W3C坐標系，這些技術包括CSS3、Canvas、SVG等。了解這一點，我們以后在學習CSS3或者SVG的時候，很多知識就可以串起來了。數字坐標系和w3c坐標系如圖2-1所示。

2.2.2　直線的繪制

在Canvas中，可以使用moveTo()和lineTo()這兩個方法配合使用來畫直線。利用這兩個方法，我們可以畫一條直線，也可以同時畫多條直線。

1．一條直線

語法：

cxt.moveTo(x1, y1); cxt.lineTo(x2, y2); cxt.stroke();

說明：
cxt表示上下文環境對象context。

(x1,y1)表示直線“起點”的坐標。moveTo的含義是“將畫筆移到該點(x1,y1)位置上，然后開始繪圖”。

(x2,y2)表示直線“終點”的坐標。lineTo的含義是“將畫筆從起點(x1,y1)開始畫直線，一直畫到終點坐標(x2,y2)”。

對于moveTo()和lineTo()這兩個方法，從英文意思角度更容易幫助我們理解和記憶。

cxt.moveTo(x1, y1); cxt.lineTo(x2, y2);

上面兩句代碼僅僅是確定直線的“起點坐標”和“終點坐標”這兩個狀態，但是實際上畫筆還沒開始“動”。因此我們還需要調用上下文對象的stroke()方法才有效。

使用Canvas畫直線，與我們平常用筆在紙張上畫直線是一樣的道理，都是先確定直線起點(x1,y1)與終點(x2,y2)，然后再用筆連線（stroke()）。

舉例：

在瀏覽器中的預覽效果如圖2-2所示。

分析：
在這個例子中，我們定義了一個獲取DOM對象元素的函數

$$ (id)，這樣減少了重復代碼量，使得思路更加清晰。記住，Canvas中使用的坐標系是“W3C坐標系”。其中這個例子的分析圖如圖2-3所示。 ![image](https://yqfile.alicdn.com/f4a93c65d0061fad6cd7a1956d01cc3a219d1625.png) #### 2．多條直線從上面可以知道，使用moveTo()和lineTo()這兩個方法可以畫一條直線。其實如果我們想要同時畫多條直線，也是使用這兩種方法。語法：

cxt.moveTo(x1, y1); cxt.lineTo(x2, y2); cxt.lineTo(x3, y3); …… cxt.stroke();

說明：
lineTo()方法是可以重復使用的。第一次使用lineTo()后，畫筆將自動移到終點坐標位置，第二次使用lineTo()后，Canvas會以“上一個終點坐標”作為第二次調用的起點坐標，然后再開始畫直線，以此類推。下面先來看個例子，這樣更容易理解些。

舉例：畫兩條直線

在瀏覽器中的預覽效果如圖2-4所示。

分析：
記住，moveTo的含義是：將畫筆移到該點的位置，然后開始繪圖。lineTo的含義是：將畫筆從起點開始畫直線，一直到終點坐標。

如果將cxt.moveTo(50,100);改為cxt.lineTo(50,100);，在瀏覽器中的預覽效果如圖2-5所示。大家根據這個例子仔細琢磨一下moveTo()與lineTo()兩個方法的區別。

舉例：用直線畫一個三角形

在瀏覽器中的預覽效果如圖2-6所示。

分析：
這里使用moveTo()與lineTo()方法畫了一個三角形。在畫三角形之前，我們事先要確定三角形三個頂點的坐標。

舉例：用直線畫一個矩形

在瀏覽器中的預覽效果如圖2-7所示。

分析：
這里使用moveTo()和lineTo()方法畫了一個矩形。在畫矩形之前，我們也需要事先確定矩形四個頂點坐標的（這幾個坐標值不是隨便來的，而是要計算出來的）。

其實在Canvas中，使用moveTo()和lineTo()方法可以畫各種多邊形如三角形、矩形、多邊形等。在實際開發中，對于三角形和多邊形，我們都是用moveTo()和lineTo()來實現。但是對于矩形來說，Canvas為我們提供了更為簡單的一套方法，在下一節中將給大家詳細介紹。

2.3　矩形

從上一節我們知道，可以將moveTo()和lineTo()配合使用來畫一個矩形。但是這種畫矩形的方法代碼量過多，因此在實際開發中并不推薦使用。

對于繪制矩形，Canvas還為我們提供了獨立的方法來實現。在Canvas中，矩形分為兩種，即“描邊”矩形和“填充”矩形。

2.3.1 “描邊”矩形

在Canvas中，我們可以將strokeStyle屬性和strokeRect()方法配合使用來畫一個“描邊矩形”。

語法：

cxt.strokeStyle = 屬性值; cxt.strokeRect(x,y,width,height);

說明：
strokeStyle是context對象的一個屬性，而strokeRect()是content對象的一個方法。大家要區分好什么叫屬性，什么叫方法。

（1）strokeStyle屬性

strokeStyle屬性取值有三種，即顏色值、漸變色、圖案。對于strokeStyle取值為漸變色和圖案的情況，我們在后續章節會詳細講解。現在先來看一下strokeStyle取值為顏色值的幾種情況：

cxt.strokeStyle = "#FF0000"; //十六進制顏色值 cxt.strokeStyle = "red"; //顏色關鍵字 cxt.strokeStyle = "rgb(255,0,0)"; //rgb顏色值 cxt.strokeStyle = "rgba(255,0,0,0.8)"; //rgba顏色值

（2）strokeRect()方法

strokeRect()方法用于確定矩形的坐標，其中x和y為矩形最左上角的坐標。注意，凡是對于Canvas中的坐標，大家一定要根據W3C坐標系來理解。此外width表示矩形的寬度，height表示矩形的高度，默認情況下width和height都是以px為單位的。strokeRect()方法分析圖如圖2-8所示。

我們還要特別注意一點，strokeStyle屬性必須在strokeRect()方法之前定義，否則strokeStyle屬性無效。也就是說，在“畫（strokeRect()）”之前一定要把應有的參數（如strokeStyle）設置好。Canvas是根據已設置的參數來“畫”圖形的，其實這跟我們平常畫畫是一樣的道理：在動筆之前首先需要確定將要畫什么東西，顏色是什么，然后再用筆畫出來。

舉例：

在瀏覽器中的預覽效果如圖2-9所示。

分析：
當將cxt.strokeStyle = "red";和cxt.strokeRect(50, 50, 80, 80);這兩句代碼位置互換順序后，strokeStyle屬性就不會生效了。大家可以自行在本地編輯器中修改測試一下，看看實際效果。上面例子的分析如圖2-10所示。

2.3.2　 “填充”矩形

在Canvas中，我們可以將fillStyle屬性和fillRect()方法配合使用來畫一個“填充矩形”。

語法：

cxt.fillStyle=屬性值; cxt.fillRect(x, y, width, height);

說明：
fillStyle是context對象的一個屬性，而fillRect()是context對象的一個方法。

fillStyle屬性跟strokeStyle屬性一樣，取值也有三種，即顏色值、漸變色、圖案。

fillRect()方法跟strokeRect()方法一樣，用于確定矩形的坐標，其中x和y為矩形最左上角的坐標，width表示矩形的寬度，height表示矩形的高度。

跟描邊矩形一樣，填充矩形的fillStyle屬性也必須在fillRect()方法之前定義，否則fillStyle屬性無效。分析如圖2-11所示。

舉例：

在瀏覽器中的預覽效果如圖2-12所示。

分析：
當我們將cxt.fillStyle = "HotPink";和cxt.fillRect(50, 50, 80, 80);這兩句代碼位置互換順序后，fillStyle屬性就不會生效了。大家可以自行在本地編輯器中修改測試一下，看看實際效果。上面例子分析如圖2-13所示。

舉例：

在瀏覽器中的預覽效果如圖2-14所示。

分析：
在這個例子中，我們同時使用了“描邊矩形”和“填充矩形”。

舉例：

在瀏覽器中的預覽效果如圖2-15所示。

分析：
這里我們畫了兩個矩形：第一個矩形使用了十六進制顏色值，第二個矩形使用了RGBA顏色值。

2.3.3　rect()方法

在Canvas，如果想要繪制一個矩形，除了使用strokeRect()和fillRect()這兩種方法之外，我們還可以使用rect()方法，如圖2-16所示。

語法：

rect(x,y,width,height);

說明：
x和y為矩形最左上角的坐標，width表示矩形的寬度，height表示矩形的高度。

strokeRect()、fillRect()和rect()都可以畫矩形。這三種方法參數是相同的，不同在于實現效果方面。其中strokeRect()和fillRect()這兩個方法在調用之后，會立即把矩形繪制出來。而rect()方法在調用之后，并不會把矩形繪制出來。只有在使用rect()方法之后再調用stroke()或者fill()方法，才會把矩形繪制出來。

（1）rect()和stroke()

cxt.strokeStyle="red"; cxt.rect(50,50,80,80); cxt.stroke();

上述代碼等價于：

cxt.strokeStyle="red"; cxt.strokeRect(50,50,80,80);

（2）rect()和fill()

cxt.fillStyle="red"; cxt.rect(50,50,80,80); cxt.fill();

上述代碼等價于：

cxt.fillStyle="red"; cxt.fillRect(50,50,80,80);

舉例：

在瀏覽器中的預覽效果如圖2-17所示。

2.3.4　清空矩形

在Canvas中，我們可以使用clearRect()方法來清空“指定矩形區域”。

語法：

cxt.clearRect(x, y, width, height);

說明：
x和y分別表示清空矩形區域最左上角的坐標，width表示矩形的寬度，height表示矩形的高度。

舉例：

在瀏覽器中的預覽效果如圖2-18所示。

分析：
這里使用clearRect()方法來清空指定區域的矩形。這個例子分析如圖2-19所示。

舉例：

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head><title></title><meta charset="utf-8" /><script type="text/javascript">function $$ (id) {return document.getElementById(id);}window.onload = function () {var cnv = $$ ("canvas");var cxt = cnv.getContext("2d");cxt.fillStyle = "HotPink";cxt.fillRect(50, 50, 80, 80);var btn = $$ ("btn");btn.onclick = function () {cxt.clearRect(0, 0, cnv.width, cnv.height);}}</script> </head> <body><canvas id="canvas" width="200" height="150" style="border:1px dashed gray;"></canvas><br /><input id="btn" type="button" value="清空canvas"/> </body> </html>

在瀏覽器中的預覽效果如圖2-20所示。

分析：
cxt.clearRect(0, 0, cnv.width, cnv.height);用于清空整個Canvas。其中，cnv.width表示獲取Canvas的寬度，cnv.height表示獲取Canvas的高度。“清空整個Canvas”這個技巧在Canvas動畫開發中會經常用到，大家一定要記住。至于怎么用，在接下來的章節里，我們會慢慢接觸到。

最后再次強調一下：所有Canvas圖形操作的屬性和方法都是基于context對象的。

2.4　多邊形

從之前的學習我們知道，可以將moveTo()和lineTo()配合使用來畫三角形和矩形。其實在Canvas中，多邊形也是使用moveTo()和lineTo()這兩個方法畫出來的。

如果我們想要在Canvas中畫多邊形，則需要事先在草稿紙或軟件中計算出多邊形中各個頂點的坐標，然后再使用moveTo()和lineTo()在Canvas中畫出來。

跟矩形不一樣，Canvas沒有專門用來繪制三角形和多邊形的方法。對于三角形以及多邊形，我們也是使用moveTo()和lineTo()這兩個方法來實現。

2.4.1　Canvas繪制箭頭

對于箭頭，我們都是事先確定箭頭的7個頂點坐標，然后使用moveTo()和lineTo()來繪制出來的。

舉例：

在瀏覽器中的預覽效果如圖2-21所示。在瀏覽器中的預覽效果如圖2-21所示。

分析：
在繪制之前，首先需要計算出箭頭各個頂點的坐標。

2.4.2　Canvas繪制正多邊形

正多邊形在實際開發中也經常見到，要想繪制正多邊形，需首先了解一下最簡單的正多邊形，即正三角形。正三角形分析圖如圖2-22所示。

根據正三角形的特點，可以將其封裝一個繪制正多邊形的函數：createPolygon()。

舉例：

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head><title></title><meta charset="utf-8" /><script type="text/javascript">function $$ (id) {return document.getElementById(id);}window.onload = function () {var cnv = $$ ("canvas");var cxt = cnv.getContext("2d");//調用自定義的方法createPolygon()createPolygon(cxt, 3, 100, 75, 50);cxt.fillStyle = "HotPink";cxt.fill();}/** n：表示n邊形* dx、dy：表示n邊形中心坐標* size：表示n邊形的大小*/function createPolygon(cxt, n, dx, dy, size) {cxt.beginPath();var degree = (2 * Math.PI )/ n;for (var i = 0; i < n; i++) {var x = Math.cos(i * degree);var y = Math.sin(i * degree);cxt.lineTo(x * size + dx, y * size + dy);}cxt.closePath();}</script> </head> <body><canvas id="canvas" width="200" height="150" style="border:1px dashed gray;"></canvas> </body> </html>

在瀏覽器中的預覽效果如圖2-23所示。

分析：
cxt.beginPath();用于開始一條新路徑，cxt.closePath();用于關閉路徑。對于beginPath()和closePath()這兩個方法，我們在“第10章 Canvas路徑”中將會詳細介紹，這里不需要深入太多。

在這個例子中，我們定義了一個繪制多邊形的函數。對于這個函數，可以加入更多的參數如顏色、邊框等，然后可以把它封裝到我們的私人圖形庫里面去。

當createPolygon(cxt, 3, 100, 75, 50);改為createPolygon(cxt, 4, 100, 75, 50);時，瀏覽器中的預覽效果如圖2-24所示。

當createPolygon(cxt, 3, 100, 75, 50);改為createPolygon(cxt, 5, 100, 75, 50);時，瀏覽器中的預覽效果如圖2-25所示。

當createPolygon(cxt, 3, 100, 75, 50);改為createPolygon(cxt, 6, 100, 75, 50);時，瀏覽器中的預覽效果如圖2-26所示。

createPolygon()只能繪制“正多邊形”，不可以用于繪制“不規則多邊形”。對于“不規則多邊形”，方法也很簡單，我們都是先確定多邊形各個定點坐標，然后使用moveTo()和lineTo()慢慢繪制。

2.4.3　五角星

同樣地，我們也可以先獲取各個頂點的坐標，然后使用moveTo()和lineTo()把五角星繪制出來。根據圖2-27的分析，我們可以知道∠BOA=36°，∠A0X=18°，∠BOX=54°，然后結合三角函數，就很容易得出五角星各個頂點的坐標。大家自己在草稿中算一下，這里就不詳細展開了。分析如圖2-27所示。

舉例：

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head><title></title><meta charset="utf-8" /><script type="text/javascript">function $$ (id) {return document.getElementById(id);}window.onload = function () {var cnv = $$ ("canvas");var cxt = cnv.getContext("2d");cxt.beginPath();for (var i = 0; i < 5; i++) {cxt.lineTo(Math.cos((18 + i * 72) * Math.PI / 180) * 50 + 100,-Math.sin((18 + i * 72) * Math.PI / 180) * 50 + 100);cxt.lineTo(Math.cos((54 + i * 72) * Math.PI / 180) * 25 + 100,-Math.sin((54 + i * 72) * Math.PI / 180) * 25 + 100);}cxt.closePath();cxt.stroke();}</script> </head> <body><canvas id="canvas" width="200" height="150" style="border:1px dashed gray;"></canvas> </body> </html>

在瀏覽器中的預覽效果如圖2-28所示。

分析：
當然，對于本節這些多邊形的繪制，我們可以封裝成一個個函數，以便實際開發中直接調用。

2.5　訓練題：繪制調色板

我們在使用繪圖軟件或取色軟件的過程中，經常會見到各種調色板效果。常見的調色板有兩種，即方格調色板和漸變調色板。在這里我們將使用本章所學到的繪圖方法來繪制這兩種調色板。

舉例：方格調色板

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head><title></title><meta charset="utf-8" /><script type="text/javascript">function $$ (id) {return document.getElementById(id);}window.onload = function () {var cnv = $$ ("canvas");var cxt = cnv.getContext("2d");for (var i = 0; i < 6; i++) {for (var j = 0; j < 6; j++) {cxt.fillStyle = "rgb(" + Math.floor(255 - 42.5 * i) + "," + Math.floor(255 - 42.5 * j) + ",0)";cxt.fillRect(j * 25, i * 25, 25, 25);}}}</script> </head> <body><canvas id="canvas" width="200" height="200" style="border:1px dashed gray;"></canvas> </body> </html>

在瀏覽器中的預覽效果如圖2-29所示。

分析：
對于這種方格色板，實現思路非常簡單：我們可以使用兩層for循環來繪制方格陣列，每個方格使用不同的顏色。其中變量i和j用來為每一個方格產生唯一的RGB色彩值。我們僅修改其中的紅色和綠色的值，而保持藍色的值不變，就可以產生各種各樣的色板。

接下來我們嘗試繪制一個更加復雜的調色板：漸變調色板。

舉例：漸變調色板

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head><title></title><meta charset="utf-8" /><script type="text/javascript">function $$ (id) {return document.getElementById(id);}window.onload = function () {var cnv = $$ ("canvas");var cxt = cnv.getContext("2d");var r = 255, g = 0, b = 0;for (i = 0; i < 150; i++) {if (i < 25) {g += 10;} else if (i > 25 && i < 50) {r -= 10;} else if (i > 50 && i < 75) {g -= 10;b += 10;} else if (i >= 75 && i < 100) {r += 10;} else {b -= 10;}cxt.fillStyle = "rgb(" + r + "," + g + "," + b + ")";cxt.fillRect(3 * i, 0, 3, cnv.height);}}</script> </head> <body><canvas id="canvas" width="255" height="150" style="border:1px dashed gray;"></canvas> </body> </html>

在瀏覽器中的預覽效果如圖2-30所示。

是不是感到很有趣呢？現在我們也可以開發一個屬于自己的調色板了。

總結

以上是生活随笔為你收集整理的《Web前端开发精品课——HTML5 Canvas开发详解》——第一部分第二章节的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：关于 iOS 上的 PWA 应用，你需要
下一篇： 2017年html5行业报告,云适配发布

HTML

《Web前端开发精品课——HTML5 Canvas开发详解》——第一部分第二章节

第2章 直線圖形

2.1 直線圖形簡介

2.2 直線

2.2.2 直線的繪制

1．一條直線

2.3 矩形

2.3.1 “描邊”矩形

2.3.2 “填充”矩形

2.3.3 rect()方法

2.3.4 清空矩形

2.4 多邊形

2.4.1 Canvas繪制箭頭

2.4.2 Canvas繪制正多邊形

2.4.3 五角星

2.5 訓練題：繪制調色板

總結