《Web前端开发精品课——HTML5 Canvas开发详解》——第一部分第二章节
本節(jié)書摘來自異步社區(qū)《Web前端開發(fā)精品課——HTML5 Canvas開發(fā)詳解》一書中的第1部分，第2章，作者：莫振杰 著，更多章節(jié)內(nèi)容可以訪問云棲社區(qū)“異步社區(qū)”公眾號(hào)查看
第2章 直線圖形
2.1 直線圖形簡(jiǎn)介
在Canvas中，基本圖形有兩種：①直線圖形；②曲線圖形。Canvas常見的直線圖形有三種，分另是直線、矩形、多邊形。
這一章我們先來學(xué)習(xí)Canvas中的直線圖形。
2.2 直線
2.2.1 Canvas坐標(biāo)系
在學(xué)習(xí)Canvas之前，我們先來介紹一下Canvas中的坐標(biāo)系是如何使用的。了解Canvas使用的坐標(biāo)系是學(xué)習(xí)Canvas的最基本的前提。
我們經(jīng)常見到的坐標(biāo)系是數(shù)學(xué)坐標(biāo)系，而Canvas使用的坐標(biāo)系是W3C坐標(biāo)系，這兩種坐標(biāo)系唯一的區(qū)別在于y軸正方向的不同。
（1）數(shù)學(xué)坐標(biāo)系：y軸正方向向上。
（2）W3C坐標(biāo)系：y軸正方向向下。
注意：W3C坐標(biāo)系的y軸正方向是向下的。很多小伙伴學(xué)到后面對(duì)Canvas一些代碼感到很困惑，那是因?yàn)樗麄儧]有清楚地意識(shí)到這一點(diǎn)。
數(shù)學(xué)坐標(biāo)系一般用于數(shù)學(xué)形式上的應(yīng)用，而在前端開發(fā)中幾乎所有涉及坐標(biāo)系的技術(shù)使用的都是W3C坐標(biāo)系，這些技術(shù)包括CSS3、Canvas、SVG等。了解這一點(diǎn)，我們以后在學(xué)習(xí)CSS3或者SVG的時(shí)候，很多知識(shí)就可以串起來了。數(shù)字坐標(biāo)系和w3c坐標(biāo)系如圖2-1所示。
2.2.2 直線的繪制
在Canvas中，可以使用moveTo()和lineTo()這兩個(gè)方法配合使用來畫直線。利用這兩個(gè)方法，我們可以畫一條直線，也可以同時(shí)畫多條直線。
1．一條直線
語法：
cxt.moveTo(x1, y1); cxt.lineTo(x2, y2); cxt.stroke();說明：
cxt表示上下文環(huán)境對(duì)象context。
(x1,y1)表示直線“起點(diǎn)”的坐標(biāo)。moveTo的含義是“將畫筆移到該點(diǎn)(x1,y1)位置上，然后開始繪圖”。
(x2,y2)表示直線“終點(diǎn)”的坐標(biāo)。lineTo的含義是“將畫筆從起點(diǎn)(x1,y1)開始畫直線，一直畫到終點(diǎn)坐標(biāo)(x2,y2)”。
對(duì)于moveTo()和lineTo()這兩個(gè)方法，從英文意思角度更容易幫助我們理解和記憶。
cxt.moveTo(x1, y1); cxt.lineTo(x2, y2);上面兩句代碼僅僅是確定直線的“起點(diǎn)坐標(biāo)”和“終點(diǎn)坐標(biāo)”這兩個(gè)狀態(tài)，但是實(shí)際上畫筆還沒開始“動(dòng)”。因此我們還需要調(diào)用上下文對(duì)象的stroke()方法才有效。
使用Canvas畫直線，與我們平常用筆在紙張上畫直線是一樣的道理，都是先確定直線起點(diǎn)(x1,y1)與終點(diǎn)(x2,y2)，然后再用筆連線（stroke()）。
舉例：
<!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.moveTo(50, 100);cxt.lineTo(150, 50);cxt.stroke();}</script> </head> <body><canvas id="canvas" width="200" height="150" style="border:1px dashed gray;"></canvas> </body> </html>在瀏覽器中的預(yù)覽效果如圖2-2所示。
分析：
在這個(gè)例子中，我們定義了一個(gè)獲取DOM對(duì)象元素的函數(shù)
$$ (id)，這樣減少了重復(fù)代碼量，使得思路更加清晰。記住，Canvas中使用的坐標(biāo)系是“W3C坐標(biāo)系”。其中這個(gè)例子的分析圖如圖2-3所示。  #### 2．多條直線 從上面可以知道，使用moveTo()和lineTo()這兩個(gè)方法可以畫一條直線。其實(shí)如果我們想要同時(shí)畫多條直線，也是使用這兩種方法。 語法：
cxt.moveTo(x1, y1); cxt.lineTo(x2, y2); cxt.lineTo(x3, y3); …… cxt.stroke();說明：
lineTo()方法是可以重復(fù)使用的。第一次使用lineTo()后，畫筆將自動(dòng)移到終點(diǎn)坐標(biāo)位置，第二次使用lineTo()后，Canvas會(huì)以“上一個(gè)終點(diǎn)坐標(biāo)”作為第二次調(diào)用的起點(diǎn)坐標(biāo)，然后再開始畫直線，以此類推。下面先來看個(gè)例子，這樣更容易理解些。
舉例：畫兩條直線
<!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.moveTo(50,50);cxt.lineTo(100,50);cxt.moveTo(50,100);cxt.lineTo(100,100);cxt.stroke();}</script> </head> <body><canvas id="canvas" width="200" height="150" style="border:1px dashed gray;"></canvas> </body> </html>在瀏覽器中的預(yù)覽效果如圖2-4所示。
分析：
記住，moveTo的含義是：將畫筆移到該點(diǎn)的位置，然后開始繪圖。lineTo的含義是：將畫筆從起點(diǎn)開始畫直線，一直到終點(diǎn)坐標(biāo)。
如果將cxt.moveTo(50,100);改為cxt.lineTo(50,100);，在瀏覽器中的預(yù)覽效果如圖2-5所示。大家根據(jù)這個(gè)例子仔細(xì)琢磨一下moveTo()與lineTo()兩個(gè)方法的區(qū)別。
舉例：用直線畫一個(gè)三角形
在瀏覽器中的預(yù)覽效果如圖2-6所示。
分析：
這里使用moveTo()與lineTo()方法畫了一個(gè)三角形。在畫三角形之前，我們事先要確定三角形三個(gè)頂點(diǎn)的坐標(biāo)。
舉例：用直線畫一個(gè)矩形
<!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.moveTo(50, 100);cxt.lineTo(50,50); cxt.lineTo(150, 50);cxt.lineTo(150, 100);cxt.lineTo(50, 100);cxt.stroke();}</script> </head> <body><canvas id="canvas" width="200" height="150" style="border:1px dashed gray;"></canvas> </body> </html>在瀏覽器中的預(yù)覽效果如圖2-7所示。
分析：
這里使用moveTo()和lineTo()方法畫了一個(gè)矩形。在畫矩形之前，我們也需要事先確定矩形四個(gè)頂點(diǎn)坐標(biāo)的（這幾個(gè)坐標(biāo)值不是隨便來的，而是要計(jì)算出來的）。
其實(shí)在Canvas中，使用moveTo()和lineTo()方法可以畫各種多邊形如三角形、矩形、多邊形等。在實(shí)際開發(fā)中，對(duì)于三角形和多邊形，我們都是用moveTo()和lineTo()來實(shí)現(xiàn)。但是對(duì)于矩形來說，Canvas為我們提供了更為簡(jiǎn)單的一套方法，在下一節(jié)中將給大家詳細(xì)介紹。
2.3 矩形
從上一節(jié)我們知道，可以將moveTo()和lineTo()配合使用來畫一個(gè)矩形。但是這種畫矩形的方法代碼量過多，因此在實(shí)際開發(fā)中并不推薦使用。
對(duì)于繪制矩形，Canvas還為我們提供了獨(dú)立的方法來實(shí)現(xiàn)。在Canvas中，矩形分為兩種，即“描邊”矩形和“填充”矩形。
2.3.1 “描邊”矩形
在Canvas中，我們可以將strokeStyle屬性和strokeRect()方法配合使用來畫一個(gè)“描邊矩形”。
語法：
cxt.strokeStyle = 屬性值; cxt.strokeRect(x,y,width,height);說明：
strokeStyle是context對(duì)象的一個(gè)屬性，而strokeRect()是content對(duì)象的一個(gè)方法。大家要區(qū)分好什么叫屬性，什么叫方法。
（1）strokeStyle屬性
strokeStyle屬性取值有三種，即顏色值、漸變色、圖案。對(duì)于strokeStyle取值為漸變色和圖案的情況，我們?cè)诤罄m(xù)章節(jié)會(huì)詳細(xì)講解。現(xiàn)在先來看一下strokeStyle取值為顏色值的幾種情況：
cxt.strokeStyle = "#FF0000"; //十六進(jìn)制顏色值 cxt.strokeStyle = "red"; //顏色關(guān)鍵字 cxt.strokeStyle = "rgb(255,0,0)"; //rgb顏色值 cxt.strokeStyle = "rgba(255,0,0,0.8)"; //rgba顏色值（2）strokeRect()方法
strokeRect()方法用于確定矩形的坐標(biāo)，其中x和y為矩形最左上角的坐標(biāo)。注意，凡是對(duì)于Canvas中的坐標(biāo)，大家一定要根據(jù)W3C坐標(biāo)系來理解。此外width表示矩形的寬度，height表示矩形的高度，默認(rèn)情況下width和height都是以px為單位的。strokeRect()方法分析圖如圖2-8所示。
我們還要特別注意一點(diǎn)，strokeStyle屬性必須在strokeRect()方法之前定義，否則strokeStyle屬性無效。也就是說，在“畫（strokeRect()）”之前一定要把應(yīng)有的參數(shù)（如strokeStyle）設(shè)置好。Canvas是根據(jù)已設(shè)置的參數(shù)來“畫”圖形的，其實(shí)這跟我們平常畫畫是一樣的道理：在動(dòng)筆之前首先需要確定將要畫什么東西，顏色是什么，然后再用筆畫出來。
舉例：
<!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.strokeStyle = "red";cxt.strokeRect(50, 50, 80, 80);}</script> </head> <body><canvas id="canvas" width="200" height="150" style="border:1px dashed gray;"></canvas> </body> </html>在瀏覽器中的預(yù)覽效果如圖2-9所示。
分析：
當(dāng)將cxt.strokeStyle = "red";和cxt.strokeRect(50, 50, 80, 80);這兩句代碼位置互換順序后，strokeStyle屬性就不會(huì)生效了。大家可以自行在本地編輯器中修改測(cè)試一下，看看實(shí)際效果。上面例子的分析如圖2-10所示。
2.3.2 “填充”矩形
在Canvas中，我們可以將fillStyle屬性和fillRect()方法配合使用來畫一個(gè)“填充矩形”。
語法：
cxt.fillStyle=屬性值; cxt.fillRect(x, y, width, height);說明：
fillStyle是context對(duì)象的一個(gè)屬性，而fillRect()是context對(duì)象的一個(gè)方法。
fillStyle屬性跟strokeStyle屬性一樣，取值也有三種，即顏色值、漸變色、圖案。
fillRect()方法跟strokeRect()方法一樣，用于確定矩形的坐標(biāo)，其中x和y為矩形最左上角的坐標(biāo)，width表示矩形的寬度，height表示矩形的高度。
跟描邊矩形一樣，填充矩形的fillStyle屬性也必須在fillRect()方法之前定義，否則fillStyle屬性無效。分析如圖2-11所示。
舉例：
在瀏覽器中的預(yù)覽效果如圖2-12所示。
分析：
當(dāng)我們將cxt.fillStyle = "HotPink";和cxt.fillRect(50, 50, 80, 80);這兩句代碼位置互換順序后，fillStyle屬性就不會(huì)生效了。大家可以自行在本地編輯器中修改測(cè)試一下，看看實(shí)際效果。上面例子分析如圖2-13所示。
舉例：
在瀏覽器中的預(yù)覽效果如圖2-14所示。
分析：
在這個(gè)例子中，我們同時(shí)使用了“描邊矩形”和“填充矩形”。
舉例：
<!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);cxt.fillStyle = "rgba(0,0,255,0.3)";cxt.fillRect(30, 30, 80, 80);}</script> </head> <body><canvas id="canvas" width="200" height="150" style="border:1px dashed gray;"></canvas> </body> </html>在瀏覽器中的預(yù)覽效果如圖2-15所示。
分析：
這里我們畫了兩個(gè)矩形：第一個(gè)矩形使用了十六進(jìn)制顏色值，第二個(gè)矩形使用了RGBA顏色值。
2.3.3 rect()方法
在Canvas，如果想要繪制一個(gè)矩形，除了使用strokeRect()和fillRect()這兩種方法之外，我們還可以使用rect()方法，如圖2-16所示。
語法：
說明：
x和y為矩形最左上角的坐標(biāo)，width表示矩形的寬度，height表示矩形的高度。
strokeRect()、fillRect()和rect()都可以畫矩形。這三種方法參數(shù)是相同的，不同在于實(shí)現(xiàn)效果方面。其中strokeRect()和fillRect()這兩個(gè)方法在調(diào)用之后，會(huì)立即把矩形繪制出來。而rect()方法在調(diào)用之后，并不會(huì)把矩形繪制出來。只有在使用rect()方法之后再調(diào)用stroke()或者fill()方法，才會(huì)把矩形繪制出來。
（1）rect()和stroke()
cxt.strokeStyle="red"; cxt.rect(50,50,80,80); cxt.stroke();上述代碼等價(jià)于：
cxt.strokeStyle="red"; cxt.strokeRect(50,50,80,80);（2）rect()和fill()
cxt.fillStyle="red"; cxt.rect(50,50,80,80); cxt.fill();上述代碼等價(jià)于：
cxt.fillStyle="red"; cxt.fillRect(50,50,80,80);舉例：
<!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.strokeStyle = "red";cxt.rect(50, 50, 80, 80);cxt.stroke();//繪制填充矩形cxt.fillStyle = "#FFE8E8";cxt.rect(50, 50, 80, 80);cxt.fill();}</script> </head> <body><canvas id="canvas" width="200" height="150" style="border:1px dashed gray;"></canvas> </body> </html>在瀏覽器中的預(yù)覽效果如圖2-17所示。
2.3.4 清空矩形
在Canvas中，我們可以使用clearRect()方法來清空“指定矩形區(qū)域”。
語法：
cxt.clearRect(x, y, width, height);說明：
x和y分別表示清空矩形區(qū)域最左上角的坐標(biāo)，width表示矩形的寬度，height表示矩形的高度。
舉例：
<!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);cxt.clearRect(60, 60, 50, 50);}</script> </head> <body><canvas id="canvas" width="200" height="150" style="border:1px dashed gray;"></canvas> </body> </html>在瀏覽器中的預(yù)覽效果如圖2-18所示。
分析：
這里使用clearRect()方法來清空指定區(qū)域的矩形。這個(gè)例子分析如圖2-19所示。
舉例：
在瀏覽器中的預(yù)覽效果如圖2-20所示。
分析：
cxt.clearRect(0, 0, cnv.width, cnv.height);用于清空整個(gè)Canvas。其中，cnv.width表示獲取Canvas的寬度，cnv.height表示獲取Canvas的高度。“清空整個(gè)Canvas”這個(gè)技巧在Canvas動(dòng)畫開發(fā)中會(huì)經(jīng)常用到，大家一定要記住。至于怎么用，在接下來的章節(jié)里，我們會(huì)慢慢接觸到。
最后再次強(qiáng)調(diào)一下：所有Canvas圖形操作的屬性和方法都是基于context對(duì)象的。
2.4 多邊形
從之前的學(xué)習(xí)我們知道，可以將moveTo()和lineTo()配合使用來畫三角形和矩形。其實(shí)在Canvas中，多邊形也是使用moveTo()和lineTo()這兩個(gè)方法畫出來的。
如果我們想要在Canvas中畫多邊形，則需要事先在草稿紙或軟件中計(jì)算出多邊形中各個(gè)頂點(diǎn)的坐標(biāo)，然后再使用moveTo()和lineTo()在Canvas中畫出來。
跟矩形不一樣，Canvas沒有專門用來繪制三角形和多邊形的方法。對(duì)于三角形以及多邊形，我們也是使用moveTo()和lineTo()這兩個(gè)方法來實(shí)現(xiàn)。
2.4.1 Canvas繪制箭頭
對(duì)于箭頭，我們都是事先確定箭頭的7個(gè)頂點(diǎn)坐標(biāo)，然后使用moveTo()和lineTo()來繪制出來的。
舉例：
<!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.moveTo(40, 60);cxt.lineTo(100, 60);cxt.lineTo(100, 30);cxt.lineTo(150, 75);cxt.lineTo(100, 120);cxt.lineTo(100, 90);cxt.lineTo(40, 90);cxt.lineTo(40, 60);cxt.stroke();}</script> </head> <body><canvas id="canvas" width="200" height="150" style="border:1px dashed gray;"></canvas> </body> </html>在瀏覽器中的預(yù)覽效果如圖2-21所示。在瀏覽器中的預(yù)覽效果如圖2-21所示。
分析：
在繪制之前，首先需要計(jì)算出箭頭各個(gè)頂點(diǎn)的坐標(biāo)。
2.4.2 Canvas繪制正多邊形
正多邊形在實(shí)際開發(fā)中也經(jīng)常見到，要想繪制正多邊形，需首先了解一下最簡(jiǎn)單的正多邊形，即正三角形。正三角形分析圖如圖2-22所示。
根據(jù)正三角形的特點(diǎn)，可以將其封裝一個(gè)繪制正多邊形的函數(shù)：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");//調(diào)用自定義的方法createPolygon()createPolygon(cxt, 3, 100, 75, 50);cxt.fillStyle = "HotPink";cxt.fill();}/** n：表示n邊形* dx、dy：表示n邊形中心坐標(biāo)* 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>在瀏覽器中的預(yù)覽效果如圖2-23所示。
分析：
cxt.beginPath();用于開始一條新路徑，cxt.closePath();用于關(guān)閉路徑。對(duì)于beginPath()和closePath()這兩個(gè)方法，我們?cè)凇暗?0章 Canvas路徑”中將會(huì)詳細(xì)介紹，這里不需要深入太多。
在這個(gè)例子中，我們定義了一個(gè)繪制多邊形的函數(shù)。對(duì)于這個(gè)函數(shù)，可以加入更多的參數(shù)如顏色、邊框等，然后可以把它封裝到我們的私人圖形庫里面去。
當(dāng)createPolygon(cxt, 3, 100, 75, 50);改為createPolygon(cxt, 4, 100, 75, 50);時(shí)，瀏覽器中的預(yù)覽效果如圖2-24所示。
當(dāng)createPolygon(cxt, 3, 100, 75, 50);改為createPolygon(cxt, 5, 100, 75, 50);時(shí)，瀏覽器中的預(yù)覽效果如圖2-25所示。
當(dāng)createPolygon(cxt, 3, 100, 75, 50);改為createPolygon(cxt, 6, 100, 75, 50);時(shí)，瀏覽器中的預(yù)覽效果如圖2-26所示。
createPolygon()只能繪制“正多邊形”，不可以用于繪制“不規(guī)則多邊形”。對(duì)于“不規(guī)則多邊形”，方法也很簡(jiǎn)單，我們都是先確定多邊形各個(gè)定點(diǎn)坐標(biāo)，然后使用moveTo()和lineTo()慢慢繪制。
2.4.3 五角星
同樣地，我們也可以先獲取各個(gè)頂點(diǎn)的坐標(biāo)，然后使用moveTo()和lineTo()把五角星繪制出來。根據(jù)圖2-27的分析，我們可以知道∠BOA=36°，∠A0X=18°，∠BOX=54°，然后結(jié)合三角函數(shù)，就很容易得出五角星各個(gè)頂點(diǎn)的坐標(biāo)。大家自己在草稿中算一下，這里就不詳細(xì)展開了。分析如圖2-27所示。
舉例：
在瀏覽器中的預(yù)覽效果如圖2-28所示。
分析：
當(dāng)然，對(duì)于本節(jié)這些多邊形的繪制，我們可以封裝成一個(gè)個(gè)函數(shù)，以便實(shí)際開發(fā)中直接調(diào)用。
2.5 訓(xùn)練題：繪制調(diào)色板
我們?cè)谑褂美L圖軟件或取色軟件的過程中，經(jīng)常會(huì)見到各種調(diào)色板效果。常見的調(diào)色板有兩種，即方格調(diào)色板和漸變調(diào)色板。在這里我們將使用本章所學(xué)到的繪圖方法來繪制這兩種調(diào)色板。
舉例：方格調(diào)色板
<!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>在瀏覽器中的預(yù)覽效果如圖2-29所示。
分析：
對(duì)于這種方格色板，實(shí)現(xiàn)思路非常簡(jiǎn)單：我們可以使用兩層for循環(huán)來繪制方格陣列，每個(gè)方格使用不同的顏色。其中變量i和j用來為每一個(gè)方格產(chǎn)生唯一的RGB色彩值。我們僅修改其中的紅色和綠色的值，而保持藍(lán)色的值不變，就可以產(chǎn)生各種各樣的色板。
接下來我們嘗試?yán)L制一個(gè)更加復(fù)雜的調(diào)色板：漸變調(diào)色板。
舉例：漸變調(diào)色板
<!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>在瀏覽器中的預(yù)覽效果如圖2-30所示。
是不是感到很有趣呢？現(xiàn)在我們也可以開發(fā)一個(gè)屬于自己的調(diào)色板了。
總結(jié)
以上是生活随笔為你收集整理的《Web前端开发精品课——HTML5 Canvas开发详解》——第一部分第二章节的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 关于 iOS 上的 PWA 应用，你需要
- 下一篇： HTML5工具汇总