繪圖步驟

html中添加 canvas 標簽，通常需指定 id width（默認 300px） height（默認 150px）

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

寬度和高度一定要在HTML中定義，不能在CSS中定義（無法通過 canvas對象獲取正確的寬度和高度）

獲取canvas對象

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

可以通過定義了一個獲取DOM對象元素的函數$$(id)，減少了重復代碼量

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

獲取上下文環境對象context

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

開始繪制

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

直線

方法說明

moveTo(x1, y1)	將畫筆移到目標位置(x1, y1)
lineTo(x2, y2)	描述畫筆的移動軌跡：從畫筆的當前位置，畫直線直到終點位置(x2, y2)
stroke()	畫線

// 起點 cxt.moveTo(x1, y1); // 終點 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進行繪制，如箭頭：

箭頭

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

正多邊形

根據正多邊形的特點，可以封裝一個專門繪制正多邊形的函數

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

• cxt.beginPath() 用于開始一條新路徑
• cxt.closePath() 用于關閉路徑。

使用效果如下：

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之前（繪圖前，需先選畫筆）

strokeStyle 用于指定連線樣式，屬性值可以為顏色值、漸變色和圖案

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

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

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

或

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

rect() 調用之后，并不會把矩形繪制出來。還需調用stroke()或者fill()方法，才會把矩形繪制出來。

填充矩形

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

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

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

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

或

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

通過多直線繪制（不推薦）

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

清空整個canvas

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

調色板

方格調色板

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

漸變調色板

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

總結

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

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