969
《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()）。
舉例：
<!DOCTYPE html>
<html xmlns="https://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 width="200" height="150" ></canvas>
</body>
</html>
在瀏覽器中的預覽效果如圖2-2所示。
分析：
在這個例子中，我們定義了一個獲取DOM對象元素的函數$$(id)，這樣減少了重複代碼量，使得思路更加清晰。記住，Canvas中使用的坐標係是“W3C坐標係”。其中這個例子的分析圖如圖2-3所示。
2．多條直線
從上麵可以知道，使用moveTo()和lineTo()這兩個方法可以畫一條直線。其實如果我們想要同時畫多條直線，也是使用這兩種方法。
語法：
cxt.moveTo(x1, y1);
cxt.lineTo(x2, y2);
cxt.lineTo(x3, y3);
……
cxt.stroke();
說明：
lineTo()方法是可以重複使用的。第一次使用lineTo()後，畫筆將自動移到終點坐標位置，第二次使用lineTo()後，Canvas會以“上一個終點坐標”作為第二次調用的起點坐標，然後再開始畫直線，以此類推。下麵先來看個例子，這樣更容易理解些。
舉例：畫兩條直線
<!DOCTYPE html>
<html xmlns="https://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 width="200" height="150" ></canvas>
</body>
</html>
在瀏覽器中的預覽效果如圖2-4所示。
分析：
記住，moveTo的含義是：將畫筆移到該點的位置，然後開始繪圖。lineTo的含義是：將畫筆從起點開始畫直線，一直到終點坐標。
如果將cxt.moveTo(50,100);改為cxt.lineTo(50,100);，在瀏覽器中的預覽效果如圖2-5所示。大家根據這個例子仔細琢磨一下moveTo()與lineTo()兩個方法的區別。
舉例：用直線畫一個三角形
<!DOCTYPE html>
<html xmlns="https://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.lineTo(150, 100);
cxt.lineTo(50, 100);
cxt.stroke();
}
</script>
</head>
<body>
<canvas width="200" height="150" ></canvas>
</body>
</html>
在瀏覽器中的預覽效果如圖2-6所示。
分析：
這裏使用moveTo()與lineTo()方法畫了一個三角形。在畫三角形之前，我們事先要確定三角形三個頂點的坐標。
舉例：用直線畫一個矩形
<!DOCTYPE html>
<html xmlns="https://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 width="200" height="150" ></canvas>
</body>
</html>
在瀏覽器中的預覽效果如圖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是根據已設置的參數來“畫”圖形的，其實這跟我們平常畫畫是一樣的道理：在動筆之前首先需要確定將要畫什麼東西，顏色是什麼，然後再用筆畫出來。
舉例：
<!DOCTYPE html>
<html xmlns="https://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 width="200" height="150" ></canvas>
</body>
</html>
在瀏覽器中的預覽效果如圖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所示。
舉例：
<!DOCTYPE html>
<html xmlns="https://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);
}
</script>
</head>
<body>
<canvas width="200" height="150" ></canvas>
</body>
</html>
在瀏覽器中的預覽效果如圖2-12所示。
分析：
當我們將cxt.fillStyle = "HotPink";和cxt.fillRect(50, 50, 80, 80);這兩句代碼位置互換順序後，fillStyle屬性就不會生效了。大家可以自行在本地編輯器中修改測試一下，看看實際效果。上麵例子分析如圖2-13所示。
舉例：
<!DOCTYPE html>
<html xmlns="https://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);
cxt.fillStyle = "#FFE8E8";
cxt.fillRect(50, 50, 80, 80);
}
</script>
</head>
<body>
<canvas width="200" height="150" ></canvas>
</body>
</html>
在瀏覽器中的預覽效果如圖2-14所示。
分析：
在這個例子中，我們同時使用了“描邊矩形”和“填充矩形”。
舉例：
<!DOCTYPE html>
<html xmlns="https://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 width="200" height="150" ></canvas>
</body>
</html>
在瀏覽器中的預覽效果如圖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);
舉例：
<!DOCTYPE html>
<html xmlns="https://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 width="200" height="150" ></canvas>
</body>
</html>
在瀏覽器中的預覽效果如圖2-17所示。
2.3.4 清空矩形
在Canvas中，我們可以使用clearRect()方法來清空“指定矩形區域”。
語法：
cxt.clearRect(x, y, width, height);
說明：
x和y分別表示清空矩形區域最左上角的坐標，width表示矩形的寬度，height表示矩形的高度。
舉例：
<!DOCTYPE html>
<html xmlns="https://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 width="200" height="150" ></canvas>
</body>
</html>
在瀏覽器中的預覽效果如圖2-18所示。
分析：
這裏使用clearRect()方法來清空指定區域的矩形。這個例子分析如圖2-19所示。
舉例：
<!DOCTYPE html>
<html xmlns="https://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 width="200" height="150" ></canvas><br />
<input 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()來繪製出來的。
舉例：
<!DOCTYPE html>
<html xmlns="https://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 width="200" height="150" ></canvas>
</body>
</html>
在瀏覽器中的預覽效果如圖2-21所示。在瀏覽器中的預覽效果如圖2-21所示。
分析：
在繪製之前，首先需要計算出箭頭各個頂點的坐標。
2.4.2 Canvas繪製正多邊形
正多邊形在實際開發中也經常見到，要想繪製正多邊形，需首先了解一下最簡單的正多邊形，即正三角形。正三角形分析圖如圖2-22所示。
根據正三角形的特點，可以將其封裝一個繪製正多邊形的函數：createPolygon()。
舉例：
<!DOCTYPE html>
<html xmlns="https://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 width="200" height="150" ></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="https://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 width="200" height="150" ></canvas>
</body>
</html>
在瀏覽器中的預覽效果如圖2-28所示。
分析：
當然，對於本節這些多邊形的繪製，我們可以封裝成一個個函數，以便實際開發中直接調用。
2.5 訓練題：繪製調色板
我們在使用繪圖軟件或取色軟件的過程中，經常會見到各種調色板效果。常見的調色板有兩種，即方格調色板和漸變調色板。在這裏我們將使用本章所學到的繪圖方法來繪製這兩種調色板。
舉例：方格調色板
<!DOCTYPE html>
<html xmlns="https://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 width="200" height="200" ></canvas>
</body>
</html>
在瀏覽器中的預覽效果如圖2-29所示。
分析：
對於這種方格色板，實現思路非常簡單：我們可以使用兩層for循環來繪製方格陣列，每個方格使用不同的顏色。其中變量i和j用來為每一個方格產生唯一的RGB色彩值。我們僅修改其中的紅色和綠色的值，而保持藍色的值不變，就可以產生各種各樣的色板。
接下來我們嚐試繪製一個更加複雜的調色板：漸變調色板。
舉例：漸變調色板
<!DOCTYPE html>
<html xmlns="https://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 width="255" height="150" ></canvas>
</body>
</html>
在瀏覽器中的預覽效果如圖2-30所示。
是不是感到很有趣呢？現在我們也可以開發一個屬於自己的調色板了。
最後更新：2017-06-06 07:32:18