繪圖步驟

html中添加 canvas 標(biāo)簽，通常需指定 id width（默認(rèn) 300px） height（默認(rèn) 150px）

<canvas id="canvas" width="200" height="150" style="border:1px dashed gray;"></canvas>

寬度和高度一定要在HTML中定義，不能在CSS中定義（無(wú)法通過(guò) canvas對(duì)象獲取正確的寬度和高度）

獲取canvas對(duì)象

var cnv = document.getElementById("canvas");

可以通過(guò)定義了一個(gè)獲取DOM對(duì)象元素的函數(shù)$$(id)，減少了重復(fù)代碼量

function $$(id){return document.getElementById(id); } var cnv = $$("canvas");

獲取上下文環(huán)境對(duì)象context

var cxt = cnv.getContext("2d");

開(kāi)始繪制

cxt.moveTo(50, 100); cxt.lineTo(150, 50); cxt.stroke();

直線

方法說(shuō)明

moveTo(x1, y1)	將畫(huà)筆移到目標(biāo)位置(x1, y1)
lineTo(x2, y2)	描述畫(huà)筆的移動(dòng)軌跡：從畫(huà)筆的當(dāng)前位置，畫(huà)直線直到終點(diǎn)位置(x2, y2)
stroke()	畫(huà)線

// 起點(diǎn) cxt.moveTo(x1, y1); // 終點(diǎn) cxt.lineTo(x2, y2); // 連線 cxt.stroke();

多條直線

cxt.moveTo(50,50); cxt.lineTo(100,50); cxt.moveTo(50,100); cxt.lineTo(100,100); cxt.stroke();

cxt.moveTo(50,50); cxt.lineTo(100,50); cxt.lineTo(50,100) cxt.lineTo(100,100); cxt.stroke();

三角形

cxt.moveTo(50, 100);cxt.lineTo(150, 50);cxt.lineTo(150, 100);cxt.lineTo(50, 100);cxt.stroke();

多邊形

和三角形一樣，需用moveTo，lineTo，stroke進(jìn)行繪制，如箭頭：

箭頭

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();

正多邊形

根據(jù)正多邊形的特點(diǎn)，可以封裝一個(gè)專門繪制正多邊形的函數(shù)

/** 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();}

• cxt.beginPath() 用于開(kāi)始一條新路徑
• cxt.closePath() 用于關(guān)閉路徑。

使用效果如下：

createPolygon(cxt, 3, 100, 75, 50);cxt.fillStyle = "HotPink";cxt.fill();

createPolygon(cxt, 4, 100, 75, 50);

createPolygon(cxt, 5, 100, 75, 50);

createPolygon(cxt, 6, 100, 75, 50);

五角星

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();

矩形

描邊矩形

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

此處strokeStyle必須在strokeRect之前（繪圖前，需先選畫(huà)筆）

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顏色值

strokeRect方法的原理圖如下，（x,y）為矩形的左上角坐標(biāo)，width為矩形寬度、height為矩形高度

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

或

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

rect() 調(diào)用之后，并不會(huì)把矩形繪制出來(lái)。還需調(diào)用stroke()或者fill()方法，才會(huì)把矩形繪制出來(lái)。

填充矩形

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

此處fillStyle必須在fillRect之前（繪圖前，需先選畫(huà)筆）

fillStyle 用于指定填充樣式，屬性值可以為顏色值、漸變色和圖案
fillRect 方法的原理圖如下，（x,y）為矩形的左上角坐標(biāo)，width為矩形寬度、height為矩形高度

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

或

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

通過(guò)多直線繪制（不推薦）

cxt.moveTo(50, 100);cxt.lineTo(50,50); cxt.lineTo(150, 50);cxt.lineTo(150, 100);cxt.lineTo(50, 100);cxt.stroke();

清空矩形

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

即鏤空矩形的效果

cxt.fillStyle = "HotPink"; cxt.fillRect(50, 50, 80, 80); cxt.clearRect(60, 60, 50, 50);

清空整個(gè)canvas

cxt.clearRect(0, 0, cnv.width, cnv.height);

調(diào)色板

方格調(diào)色板

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);}}

漸變調(diào)色板

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); }

總結(jié)

以上是生活随笔為你收集整理的canvas系列教程01——直线、三角形、多边形、矩形、调色板的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。