在HTML5之前，網頁顯示圖像是用jpg、png 等嵌入式圖像格式。動畫通常是由Flash 實現的。圖像顯示會拖慢頁面加載速度，Flash 依賴於第三方也會出現一些用戶無法解決的問題。現在出現了兩種新的圖形格式canvas和svg，並且HTML5對它們提供了非常好的支持，其中, canvas 爲HTML5的新增元素，本節將對canvas的用法進行詳細介紹。

1、初識 canvas

canvas的中文意思爲畫布，現實生活中的畫布是用來作畫的，HTML5中的canvas與之類似，可以稱其爲“網頁中的畫布”，有了這個畫布便可以輕鬆地在網頁中繪製圖形、表格、文字、圖片等。

（1）創建畫布

HTML5中提供了<canvas>標籤，使用<canvas>標籤可以在網頁中創建一個矩形區域的畫布，它本身不具有繪製功能，可以通過JavaScript操作繪製圖形的API進行繪製操作。
在網頁中創建一個畫布的語法如下所示：

<canvas id="cavsElem" width="400" height="300">您的瀏覽器不支持canvas</canvas>

在上面語法中，定義id屬性是爲了在JavaScript代碼中引用元素。標籤中間的文字在瀏覽器不支持canvas的情況下才會顯示。<canvas>標籤與<img>標籤一樣，有兩個原生屬性width和height，默認300x 150像素，沒有單位的值將會被忽略不計。另外，不要用CSS控制它的寬和高，否則可能會引起畫布上的圖形變形。

要在畫布中繪製圖形，首先要通過JavaScript的getElementById()函數獲取到網頁中的畫布對象，代碼如下:

var canvas=document.getElementById('cavsElem');

canvas 畫布默認爲透明，背景色可以自定義。

（2）準備畫筆

有了畫布之後，要開始作畫需要準備一隻畫筆，這隻畫筆就是context對象。context對象是畫布的上下文，也叫作繪製環境，是所有的繪製操作API的入口。該對象可以使用JavaScript腳本獲得，具體語法如下:

var context=canvas.getContext('2d');

在上面語法中參數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()方法繪製直線，代碼如下:

context.lineTo(x,y);

在上面語法中，“x,y”爲線頭點座標，lineTo()方法用於定義從“x,y”的位置繪製一條直線到起點或者上一個線頭點。

（5）路徑

路徑是所有圖形繪製的基礎，例如繪製直線確定了起始點和線頭點後，便形成了一條繪製路徑。如果繪製複雜路徑，必須使用開始路徑和閉合路徑的方法，代碼如下:

context.beginPath();   //開始路徑
context.closePath();   //閉合路徑

開始路徑的核心作用是將不同線條繪製的形狀進行隔離，每次執行此方法，表示重新繪製一個路徑，同之前繪製的路徑可以分開樣式設置和管理;閉合路徑會自動把最後的線頭和開始的線頭連在一起。

（6）描邊

在canvas圖形繪製中，路徑只是草稿，真正繪製線必須執行stroke()方法根據路徑進行描邊，代碼如下:

context.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 中提供了用於填充當前圖形(閉合路徑)的方法:

context.fill();

在示例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中還有一個相當於橡皮擦的方法，使用它可以清除矩形內繪製的內容，語法如下:

context.clearRect (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);
    //清除矩形
    context.clearRect(100,100,200,150);
</script>
</body>
</html>

用瀏覽器打開頁面效果如圖所示。

圖示例頁面效果

在圖中，兩個矩形中缺少的部分爲被清除的矩形區域，畫布上的任意圖形都可以用這樣的方式來清除。

3、利用 canvas繪製圓形

在canvas中可以使用arc()方法來繪製弧形和圓形，具體語法如下:

context.arc (x , y, radius, startAngle, endAngle, bAntiClockwise);

上述語法中，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°
弧度	0	π/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元立即加入學習！有需要的朋友戳：

騰訊課堂測試技術學習地址

歡迎轉載，但未經作者同意請保留此段聲明，並在文章頁面明顯位置給出原文鏈接。

基於HTML5的移動Web應用——HTML5 畫布

目錄

1、初識 canvas

（1）創建畫布

（2）準備畫筆

（3）座標和起始點

（4）繪製線條

（5）路徑

（6）描邊

（7）填充

2、利用canvas繪製矩形和清除矩形

3、利用 canvas繪製圓形

4、利用 canvas繪製圖片

5、利用canvas其他方法

（1） clip() 方法

（2）save() 和restore()方法

高效率使用windows

MySQL數據庫——常用函數

MySQL數據庫——約束類型

MySQL數據庫——查詢數據案例（2）

MySQL數據庫——數據庫維護

理解Spring中依賴注入（DI）與控制反轉（IoC）

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結