目錄
- 1、初識 canvas
-
- （1）建立畫布
- （2）準備畫筆
- （3）坐标和起始點
- （4）繪制線條
- （5）路徑
- （6）描邊
- （7）填充
- 2、利用canvas繪制矩形和清除矩形
- 3、利用 canvas繪制圓形
- 4、利用 canvas繪制圖檔
- 5、利用canvas其他方法
-
- （1） clip() 方法
- （2）save() 和restore()方法
在HTML5之前，網頁顯示圖像是用jpg、png 等嵌入式圖像格式。動畫通常是由Flash 實作的。圖像顯示會拖慢頁面加載速度，Flash 依賴于第三方也會出現一些使用者無法解決的問題。現在出現了兩種新的圖形格式canvas和svg，并且HTML5對它們提供了非常好的支援，其中, canvas 為HTML5的新增元素，本節将對canvas的用法進行詳細介紹。
1、初識 canvas
canvas的中文意思為畫布，現實生活中的畫布是用來作畫的，HTML5中的canvas與之類似，可以稱其為“網頁中的畫布”，有了這個畫布便可以輕松地在網頁中繪制圖形、表格、文字、圖檔等。
（1）建立畫布
HTML5中提供了
<canvas>
标簽，使用
<canvas>
标簽可以在網頁中建立一個矩形區域的畫布，它本身不具有繪制功能，可以通過JavaScript操作繪制圖形的API進行繪制操作。
在網頁中建立一個畫布的文法如下所示：
在上面文法中，定義id屬性是為了在JavaScript代碼中引用元素。标簽中間的文字在浏覽器不支援canvas的情況下才會顯示。
<canvas>
标簽與
<img>
标簽一樣，有兩個原生屬性width和height，預設300x 150像素，沒有機關的值将會被忽略不計。另外，不要用CSS控制它的寬和高，否則可能會引起畫布上的圖形變形。
要在畫布中繪制圖形，首先要通過JavaScript的getElementById()函數擷取到網頁中的畫布對象，代碼如下:
canvas 畫布預設為透明，背景色可以自定義。
（2）準備畫筆
有了畫布之後，要開始作畫需要準備一隻畫筆，這隻畫筆就是context對象。context對象是畫布的上下文，也叫作繪制環境，是所有的繪制操作API的入口。該對象可以使用JavaScript腳本獲得，具體文法如下:
在上面文法中參數2d代表畫筆的種類，這裡用來執行二維操作，三維操作也是存在的，可以把參數替換為webgl，三維操作目前還沒有廣泛應用，了解即可。
（3）坐标和起始點
2d代表一個平面，繪制圖形時需要在平面上确定起始點，也就是“從哪裡開始畫”，這個點需要通過坐标來控制，canvas的坐标系從最左上角“0, 0”開始。x軸向右增大，y軸向下增大，如圖所示。
圖 canvas 的坐标系說明圖
設定上下文繪制路徑起點的代碼如下:
var context=canvas. getContext ('2d');
context .moveTo(x,y);
在上述文法中，x、y都是相對于canvas畫布的最左上角。使用context對象的moveTo()方法進行設定，相當于移動畫筆到某個位置。
（4）繪制線條
在canvas中使用lineTo()方法繪制直線，代碼如下:
在上面文法中，“x,y”為線頭點坐标，lineTo()方法用于定義從“x,y”的位置繪制一條直線到起點或者上一個線頭點。
（5）路徑
路徑是所有圖形繪制的基礎，例如繪制直線确定了起始點和線頭點後，便形成了一條繪制路徑。如果繪制複雜路徑，必須使用開始路徑和閉合路徑的方法，代碼如下:
context.beginPath(); //開始路徑
context.closePath(); //閉合路徑
開始路徑的核心作用是将不同線條繪制的形狀進行隔離，每次執行此方法，表示重新繪制一個路徑，同之前繪制的路徑可以分開樣式設定和管理;閉合路徑會自動把最後的線頭和開始的線頭連在一起。
（6）描邊
在canvas圖形繪制中，路徑隻是草稿，真正繪制線必須執行stroke()方法根據路徑進行描邊，代碼如下:
有了以上内容作為基礎，就可以利用Canvas繪制一個圖形，基本步驟如下:
(1)建立畫布:
<canvas></canvas>.
(2)準備畫筆(擷取上下文對象):
canvas.getContex(2d);
。
(3)開始路徑規劃:
context.beginPath();
。
(4)移動起始點:
context.moveTo(x, y);
。
(5)繪制線(矩形、圓形、圖檔…):
context.lineTo(x, y);
。
(6)閉合路徑:
context.closePath();
。
(7)繪制描邊:
context.stroke();
。
下面通過一個案例來示範如何在頁面中繪制一個三角形，如示例所示。
【示例】 Canvas繪制三角形
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Canvas繪制三角形</title>
</head>
<body>
<canvas id="cavsElem">
你的浏覽器不支援canvas，請更新浏覽器
</canvas>
<script>
//===============基本繪制API====================
//獲得畫布
var canvas = document.getElementById('cavsElem');
var context = canvas.getContext('2d'); //獲得上下文
//設定标簽的屬性寬高和邊框
canvas.width = 900;
canvas.height = 600;
canvas.style.border="1px solid #000";
//繪制三角形
context.beginPath(); //開始路徑
context.moveTo(100,100); //三角形，左頂點
context.lineTo(300, 100); //右頂點
context.lineTo(300, 500); //底部的點
context.closePath(); //結束路徑
context.stroke(); //描邊路徑
</script>
</body>
</html>
用浏覽器打開頁面效果如圖所示。
圖 示例頁面效果
在示例中，使用JavaScript為畫布設定了寬高和邊框，然後通過坐标确定了三角形的3個點，規劃了繪制路徑，最後進行描邊操作，成功地繪制了一個三角形。
（7）填充
在示例中，繪制了一個隻有邊框的空三角形，canvas 中提供了用于填充目前圖形(閉合路徑)的方法:
在示例4中進行描邊操作之後添加上述填充方法，頁面效果如圖所示。
圖 三角形填充後效果
2、利用canvas繪制矩形和清除矩形
在前面介紹了利用canvas繪制圖形的基本步驟，getContext(“2d”)對象作為HTML5的内建對象，它還提供了快速繪制矩形、圓形、字元，以及添加圖像的方法。例如，分别使用strokeRect()方法和fillRect()方法來繪制矩形邊框和填充矩形，代碼如下:
context.strokeRect (x, y, width, height); //繪制矩形邊框
context.fillRect (x,y, width, height); //繪制填充矩形
在上面文法中，x、y代表矩形起點的橫縱坐标，width 和height代表要繪制矩形的寬和高，需要注意的是兩個方法可以單獨使用，如示例所示。
【示例】 繪制矩形
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>繪制矩形</title>
</head>
<body>
<canvas id="cavsElem">
你的浏覽器不支援canvas，請更新浏覽器
</canvas>
<script>
//===============繪制矩形====================
//獲得畫布
var canvas = document.getElementById('cavsElem');
var context = canvas.getContext('2d'); //獲得上下文
//設定标簽的屬性寬高和邊框
canvas.width = 900;
canvas.height = 600;
canvas.style.border="1px solid #000";
//繪制矩形
context.strokeRect(200,50,200,100);
context.fillRect(200,200,200,100);
</script>
</body>
</html>
用浏覽器打開示例，頁面效果如圖所示。
圖 示例頁面效果
在示例中，通過坐标的不同，繪制了兩個不同位置的矩形邊框和填充矩形。在canvas中還有一個相當于橡皮擦的方法，使用它可以清除矩形内繪制的内容，文法如下:
在上面文法中，x.y代表要清除矩形起點的橫縱坐标，width 和height代表要清除矩形的寬和高，具體用法如示例所示。
【示例】 清除矩形
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>清除矩形</title>
</head>
<body>
<canvas id="cavsElem">
你的浏覽器不支援canvas，請更新浏覽器
</canvas>
<script>
//===============清除矩形====================
//獲得畫布
var canvas = document.getElementById('cavsElem');
var context = canvas.getContext('2d'); //獲得上下文
//設定标簽的屬性寬高和邊框
canvas.width = 900;
canvas.height = 600;
canvas.style.border="1px solid #000";
//繪制矩形
context.strokeRect(200,50,200,100);
context.fillRect(200,200,200,100);
//清除矩形
context.clearRect(100,100,200,150);
</script>
</body>
</html>
用浏覽器打開頁面效果如圖所示。
圖 示例頁面效果
在圖中，兩個矩形中缺少的部分為被清除的矩形區域，畫布上的任意圖形都可以用這樣的方式來清除。
3、利用 canvas繪制圓形
在canvas中可以使用arc()方法來繪制弧形和圓形，具體文法如下:
上述文法中，x、y代表arc的中心點；radius 代表圓形半徑的長度; startAngle 代表以starAngle開始(弧度)，endAngle 代表以endAngle結束(弧度); bAntiClockwise 代表是否是逆時針，設定為true意味着弧形的繪制是逆時針方向的，false則為順時針進行。
下面通過一個案例來示範如何使用arc()方法繪制圓形和弧形，如示例所示。
【示例】 繪制圓形和弧形
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>繪制圓形和弧形</title>
</head>
<body>
<canvas id="cavsElem" width='400' height="300">
你的浏覽器不支援canvas，請更新浏覽器
</canvas>
<script>
/* 繪制圓形*/
//獲得畫布并上下文對象
var context = document.getElementById('cavsElem').getContext('2d');
context.beginPath();//開始路徑
context.arc(100,100,100,0,2*Math.PI,true);//繪制圓形，true逆時針
context.closePath();//關閉路徑
context.fillStyle = 'pink';//設定填充顔色
context.fill();//填充
/* 繪制弧形*/
context.beginPath();//開始路徑
context.strokeStyle = "#fff";//設定描邊顔色
context.lineWidth = 5;//設定線的粗細
context.arc(100,100,25,Math.PI/6,5*Math.PI/6,false);//繪制弧形，
context.stroke();//描邊
</script>
</body>
</html>
用浏覽器打開示例，頁面效果如圖所示。
圖 示例頁面效果
在示例中，fillStyle()方法用于設定圖形的填充顔色，strokeStyle()方法用于設定描邊的顔色，lineWidth屬性用于設定線條的粗細(以像素為機關)。這些樣式設定同樣可以應用于其他任意圖形。arc()方法的參數中，bAntiClockwise 設定為false，代表要繪制一個弧形，使用Math.PI來擷取圓周率π的值，并且使用它來計算弧度值。特殊角度數和弧度數對應如表所示。
表 角度數和弧度數對比
| 度 | 0° | 30° | 45° | 60° | 90° | 120° | 135° | 150° | 180° | 270° | 360° |
|---|---|---|---|---|---|---|---|---|---|---|---|
| 弧度 | π/6 | π/4 | π/3 | π/2 | 2π/3 | 3π/4 | 5π/6 | π | 3π/2 | 2π |
4、利用 canvas繪制圖檔
canvas中的繪制圖檔其實就是把一幅圖放在畫布 上，文法如下:
context.drawImage (image, dx, dy) //繪制原圖
context. drawImage (image, dx, dy, dWidth, dHeight) //縮放繪圖
context.drawImage (image, sx, sy, sWidth, sHeigh, dx, dy, dWidth, dHeight) // 切片繪圖
在上述文法中，image 代表圖檔的來源，dx、 dy 代表在目标中的坐标，sx、sy是Image在源中的起始坐标，sWidh. sHeight 是源中圖檔的寬和高，dWidth. dHeight 是目标的寬和高。
Drawlmag()方法的常用方式是繪制原圖，如示例所示。
【示例】 繪制圖檔
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>繪制圖檔</title>
</head>
<body>
<canvas id="cavsElem" width="400" height="300" >
你的浏覽器不支援canvas，請更新浏覽器
</canvas>
<script type="text/javascript">
//獲得畫布
var canvas=document.getElementById('cavsElem');
//設定畫布邊框
canvas.style.border="1px solid #000";
//擷取上下文
var context = canvas.getContext('2d');
//建立圖檔對象
var img=new Image();
//設定圖檔路徑
img.src="img/img1.jpg";
//當頁面加載完成使用此圖檔
img.onload = function(){
//使用canvas繪制圖檔
context.drawImage(img,0,0);
};
</script>
</body>
</html>
用浏覽器打開示例，頁面效果如圖所示。
圖 示例頁面效果
在示例中，必須使用圖檔對象的onload事件，否則是看不到運作效果的，因為繪制圖檔的基礎是這個圖檔已經被加載。
5、利用canvas其他方法
canvas中提供的有關圖形繪制的方法還有很多，這裡不能一一列舉， 但是有必要介紹幾個常用的方法，具體如下:
（1） clip() 方法
clip()方法用于從原始畫布剪切任意形狀和尺寸的區域，具體使用方法如示例所示。
【示例】 clip()剪切任意形狀和尺寸區域
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>clip()剪切任意形狀和尺寸區域</title>
</head>
<body>
<canvas id="cavsElem" width="400" height="300" >
你的浏覽器不支援canvas，請更新浏覽器
</canvas>
<script>
//獲得畫布
var canvas=document.getElementById('cavsElem');
//設定畫布邊框
canvas.style.border="1px solid #000";
//擷取上下文
var context = canvas.getContext('2d');
// 剪切矩形區域
context.rect(50,20,200,120);//(x,y,width,height)
context.stroke();//描邊
context.clip();
// 在 clip()之後繪制圓形,隻有被剪切區域的内圓形可見
context.arc(200,100,70,0,2*Math.PI,true);//(x,y,半徑,開始弧度，結束弧度，true代表逆時針繪制圓形)
context.fillStyle="pink";
context.fill();//填充
</script>
</body>
</html>
用Chrome浏覽器打開示例，頁面效果如圖所示。
圖 示例頁面效果
（2）save() 和restore()方法
在canvas繪制圖形的過程中，有時網頁需要多次顯示相同的效果，例如繪制圓形後繪制矩形，然後在觸發某個事件時需要回到繪制圓形的狀态，這時就用到了save() 和restore()方法，save() 用來儲存畫布的繪制狀态，例如儲存繪制一個圓形的狀态，當繪制矩形後需要回到之前的狀态，這時可以使用restore()方法。Restore()方法用于移除自上一次調用save()方法所添加的任何效果。
超全面的測試IT技術課程，0元立即加入學習！有需要的朋友戳：
騰訊課堂測試技術學習位址
歡迎轉載，但未經作者同意請保留此段聲明，并在文章頁面明顯位置給出原文連結。