目錄

一、簡單介紹

二、開始使用

三、畫直線、虛線

3.1 畫直線

1. 畫直線的步驟：

2. 設置直線的樣式

3. 繪制多條直線

3.2 畫虛線

四、整理使用到的方法：

---

參考了廖雪峰老師的筆記。

一、簡單介紹

Canvas是 HTML5新增的組件，它就像一塊幕布，可以用JavaScript在上面繪制各種圖表、動畫等。

沒有Canvas的年代，繪圖只能借助Flash插件實現，頁面不得不用JavaScript和Flash進行交互。有了Canvas，我們就再也不需要Flash了，直接使用JavaScript完成繪制。

---

二、開始使用

Canvas的坐標以左上角為原點，水平向右為X軸，垂直向下為Y軸，以像素為單位，所以每個點都是非負整數。

一個Canvas定義了一個指定尺寸的矩形框，在這個范圍內我們可以隨意繪制。

<canvas width="500" height="500" id="test-canvas"><p>你的瀏覽器版本過低，暫不支持畫布，請先升級瀏覽器，或者更換瀏覽器！</p> </canvas>

? ? 由于瀏覽器對HTML5標準支持不一致，所以通常在<canvas>內部添加一些說明性HTML代碼，如果瀏覽器支持Canvas，它將忽略<canvas>內部的HTML，如果瀏覽器不支持Canvas，它將顯示<canvas>內部的HTML。

也可以通過?js 來判斷瀏覽器是否支持。

var canvas = document.getElementById('test-canvas'); if (canvas.getContext) {console.log('你的瀏覽器支持Canvas!'); } else {console.log('你的瀏覽器不支持Canvas!'); }

注意：對于 canvas 來說，不能直接使用 margin: 0 auto; 進行居中，若是需要居中，可以給他添加一個父元素，讓父元素居中。或者給canvas設置：display:bloack;margin:0 auto;

---

三、畫直線、虛線

3.1 畫直線

1. 畫直線的步驟：

（1）獲取畫布；（2）獲取畫布的上下文 c.getContext("2d")；（3）開始一條路徑 c.beginPath()；（4）確定起始點 c.moveTo(x1, y1)；（5）確定結束點 c.lineTo(x2, y2)；（6）著色 c.stroke()；（7）結束路徑 c.closePath()；

getContext('2d')方法讓我們拿到一個CanvasRenderingContext2D對象，所有的繪圖操作都需要通過這個對象完成，如繪制路徑、矩形、圓形、字符、添加圖像的方法。

<style>canvas{border:2px solid #ccc;display: block;margin:0 auto;} </style><canvas width="500" height="500" id="test-canvas"><p>你的瀏覽器版本過低，暫不支持畫布，請先升級瀏覽器，或者更換瀏覽器！</p> </canvas><script>var canvas = document.getElementById("test-canvas"); //（1）獲取畫布； var c = canvas.getContext("2d");//（2）獲取畫布的上下文； c.beginPath(); // （3）開始一條路徑； c.moveTo(100, 100);//（4）確定起始點； c.lineTo(200, 200);//（5）確定結束點； c.stroke(); //（6）著色；c.closePath(); //（7）結束路徑； </script>

2. 設置直線的樣式

必須在著色 c.stroke() 之前設置，否則樣式會失效。

（1）設置或返回筆觸的顏色、漸變或模式：c.strokeStyle="顏色十六進制/顏色英文/rgba/rgb"；

（2）設置線寬：c.lineWidth = 5；

<script>var canvas = document.getElementById("test-canvas"); var c = canvas.getContext("2d"); c.beginPath(); c.moveTo(100, 100); c.lineTo(200, 200);c.strokeStyle = "red"; //在著色之前設置顏色c.lineWidth = 10; //在著色之前設置線寬c.stroke(); c.closePath(); </script>

3. 繪制多條直線

（1）封裝繪制多條直線的方法

var content = document.getElementById("test-canvas");var cx = content.getContext("2d");//第一條紅色直線cx.beginPath();cx.moveTo(100,100);cx.lineTo(200,100);cx.strokeStyle = "red";cx.lineWidth = 2;cx.stroke();cx.closePath();//第二條綠色直線cx.beginPath();cx.moveTo(200,100);cx.lineTo(200,200);cx.strokeStyle = "green";cx.lineWidth = 2;cx.stroke();cx.closePath();//第一三條藍色直線cx.beginPath();cx.moveTo(200,200);cx.lineTo(100,200);cx.strokeStyle = "blue";cx.lineWidth = 2;cx.stroke();cx.closePath();

可以發現上面代碼重復較多，因此我們在畫多條直線時，可以把這些代碼封裝起來。

//參數：x1：第一個點的x坐標(Number)，y1：第一個點的y坐標(Number) //參數：x2：第二個點的x坐標(Number)，y2：第二個點的y坐標(Number)， //參數：color：顏色(String)，width：線寬(Number); function drawLine(x1, y1, x2, y2,color,width){cx.beginPath();cx.moveTo(x1,y1);cx.lineTo(x2,y2);cx.strokeStyle = color || "black";cx.lineWidth = width || 1;cx.stroke();cx.closePath();}

使用：

var content = document.getElementById("test-canvas"); var cx = content.getContext("2d"); drawLine(100,100,200,100,"red",2); //第一條紅色直線 drawLine(200,100,200,200,"green",2); //第二條綠色直線 drawLine(200,200,100,200,"blue",2); //第三條藍色直線

（2）cx.lineTo(x,y); 直接連用；

除了上面封裝直線的方法之外，cx.lineTo(x,y); 可以直接連用。例如使用 cx.lineTo(x,y); 寫出上面封裝的案例。

var content = document.getElementById("test-canvas");var cx = content.getContext("2d");cx.beginPath();cx.moveTo(100, 100);cx.lineTo(200,100);cx.lineTo(200,200);cx.lineTo(100,200);cx.strokeStyle="blue";cx.stroke();cx.closePath();

這個方法有個缺點：不能給每條線單獨著色，更改顏色會讓所有直線都變色。

3.2 畫虛線

畫虛線同畫直線，就是每條直線之間有間隔，假設畫6條直線，每條直線之間間隔為5個單位。

var content = document.getElementById("test-canvas");var cx = content.getContext("2d");drawLine(100,100, 105,100, "red", 2);drawLine(110,100, 115,100, "red", 2);drawLine(120,100, 125,100, "red", 2);drawLine(130,100, 135,100, "red", 2);drawLine(140,100, 145,100, "red", 2);drawLine(150,100, 155,100, "red", 2);function drawLine(x1, y1, x2, y2,color,width){cx.beginPath();cx.moveTo(x1,y1);cx.lineTo(x2,y2);cx.strokeStyle = color || "black";cx.lineWidth = width || 1;cx.stroke();cx.closePath();}

1. 根據它的規律，我們可以用循環來繪制虛線。

var content = document.getElementById("test-canvas");var cx = content.getContext("2d");for(var i=0; i<6; i++){drawLine(100+10*i,100, 105+10*i,100, "red", 2);}

同樣地，若是想設置傾斜的虛線，對應y軸坐標也要做出改變，例如：

2. 除了上面循環外，還有 專門的畫虛線的方法：cx.setLineDash([虛線長度, 虛線之間的間隔])?

var content = document.getElementById("test-canvas"); var cx = content.getContext("2d");cx.setLineDash([20, 5]); //設置虛線長度205，間隔為5 cx.beginPath(); cx.moveTo(100,100); cx.lineTo(200,100); cx.stroke(); cx.closePath();

?

---

四、總結(w3c 教程)：

1. 畫直線的步驟：

（1）獲取畫布 var c = document.getElementById("text-canvas")；

（2）獲取畫布的上下文 c.getContext("2d")；

（3）開始一條新路徑，或重置當前路徑?c.beginPath()；

（4）確定起始點，把路徑移動到畫布中的指定點，不創建線條?c.moveTo(x1, y1)；

（5）確定結束點 c.lineTo(x2, y2)；

（6）在著色前給線條設置樣式：c.strokeStyle = "顏色"; c.lineWidth = 數字；

（6）著色，繪制已定義的路徑 c.stroke()；

（7）結束路徑 c.closePath()；

2. 畫多條直線

（1）畫單獨的多條直線，封裝方法：

//參數：cx：畫布元素 //參數：x1：第一個點的x坐標(Number)，y1：第一個點的y坐標(Number) //參數：x2：第二個點的x坐標(Number)，y2：第二個點的y坐標(Number)， //參數：color：顏色(String)，width：線寬(Number); function drawLine(cx, x1, y1, x2, y2,color,width){cx.beginPath();cx.moveTo(x1,y1);cx.lineTo(x2,y2);cx.strokeStyle = color || "black";cx.lineWidth = width || 1;cx.stroke();cx.closePath();}

（2）畫連續的直線，連續使用 lineTo(x,y); 方法：

var content = document.getElementById("test-canvas");var cx = content.getContext("2d");cx.beginPath();cx.moveTo(100, 100);cx.lineTo(200,100);cx.lineTo(200,200);cx.lineTo(100,200);cx.strokeStyle="blue";cx.stroke();cx.closePath();

3. 畫虛線

（1）循環畫多條直線。

var content = document.getElementById("test-canvas");var cx = content.getContext("2d");for(var i=0; i<6; i++){ //循環6次，畫了6條長度為5，間隔5個單位的直線drawLine(100+10*i,100, 105+10*i,100, "red", 2);}

（2）使用方法：cx.setLineDash([虛線長度, 虛線之間的間隔])

var content = document.getElementById("test-canvas"); var cx = content.getContext("2d");cx.setLineDash([20, 5]); //設置虛線長度205，間隔為5 cx.beginPath(); cx.moveTo(100,100); cx.lineTo(200,100); cx.stroke(); cx.closePath();

總結

以上是生活随笔為你收集整理的canvas1：简单介绍、开始使用、画直线+虚线的全部內容，希望文章能夠幫你解決所遇到的問題。

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