淺析HTML5的Canvas——1

一．Canvas的基本介紹

• １．什麼是Canvas

定義：是HTML5提供的一種新標籤, ie9才開始支援的，Canvas是一個矩形區域的畫布，是使用js的一個api介面，可以用JS控制每一個畫素在上面繪畫。canvas 標籤使用 JavaScript 在網頁上繪製影象，本身不具備繪圖功能。canvas 擁有多種繪製路徑、矩形、圓形、字元以及新增影象的方法。
用canvas作畫。直接在HTML架構中寫一個canvas即可：

建立畫布
<canvas id="cvs" width="800" height="600">你的瀏覽器不支援canvas</canvas>

其中標籤裡面的文字是給不支援canvas的瀏覽器看的，支援的永遠看不到。這個畫布的特性有必要說一下，他有兩個原生的屬性，即width和height。通常我們使用它自身的寬高屬性來設定它的寬高，除非特殊情況，一定不要用css來定義Canvas的寬高。

• 之後使用js自網頁上繪製，基本分為三個步驟：

1. 畫布有了，現在我們把他拿出來：

var cvs = document.getElementById('cvs');

2. 畫筆現在畫布已經有了，想往上面塗鴉，當然還需要一隻筆。canvas取得筆的方法如下：

var ctx = cvs.getContext('2d');

3. 呼叫畫筆下相關方法繪製圖案：

ctx.beginPath();  //3、1開始繪製
ctx.moveTo(10,10);  //3、2放置起點的座標
ctx.lineTo(10,210);  //3、3放置畫筆的途徑點座標
ctx.lineTo(210,210);            
ctx.closePath();  //把起點和結束點連線起來，形成一個閉合的圖案
 ctx.stroke()  //3、4繪製線條

此時在頁面上就可以看到西面的效果：

到這裡，想必大家對canvas已經有了一定的瞭解，下面來詳細介紹canvas該如何繪製線條！

• 2．Canvas繪製線條

在開始之前我們先拿出畫布和畫筆：

var cvs = document.getElementById('cvs'); //畫布
var ctx = cvs.getContext('2d'); // 畫筆

我們畫畫的時候，落筆點是不固定的，隨時都會變。canvas雖然不是通過手來決定落筆點，但也有一個方法,就是moveTo。moveTo的作用相當於指定畫筆放置的起點（即座標）：

ctx.moveTo(x,y);

我們必須開始畫。先畫最簡單的：直線，畫直線的方法即lineTo，他的引數和moveTo一樣的，都是一個點：

ctx.lineTo(x,y);

下面我們就來實際畫4條線圍成一個矩形：

ctx.moveTo(100,100);
ctx.lineTo(200,100);
ctx.lineTo(200,200);
ctx.lineTo(100,200);
ctx.lineTo(100,100);
ctx.stroke();

此時重新整理，就能看到一個四邊形了。
由上面的圖形我們可以看出，預設的線條粗細是1px，而線條顏色是黑色。當然我們可以設定他們：

ctx.lineWidth = 10;
ctx.strokeStyle = 'rgba(255,0,0,0.5)';

上面的程式碼把線條寬度設定成了10px，線條顏色變成了半透明的紅色。

怎麼左上角缺了一小塊似得？這不是錯覺。原因就是使用canvas的線條繪製，需要進行閉合，不然每一條由.lineTo（）繪製出的線段都會自動連線起來，除了起點和終點。
所以我們需要用closePath()，來進行閉合：

ctx.moveTo(100,100);
ctx.lineTo(200,100);
ctx.lineTo(200,200);
ctx.lineTo(100,200);
ctx.lineTo(100,100);
ctx.closePath();//閉合路徑
ctx.lineWidth = 10;
ctx.strokeStyle = 'rgba(255,0,0,0.5)';
ctx.stroke();

此時重新整理，就是一個完美的正方形了。如圖:

如果我想使矩形的邊角變成圓角，有沒有辦法呢？當然有，就是lineJoin屬性。lineJoin，意思即線的交匯處，有3個屬性：miter(預設，尖角)，bevel（斜角）,round（圓角），如圖：

通過前面圖我們瞭解到，Canvas的線條兩端是平的，可不可以改呢？畢竟平的不好看。也是可以的，即lineCap屬性，這個就是定義線條的端點。lineCap有3個值：butt（平，預設）,round（圓）,square（方），如圖：

• 3．Canvas填充和漸變

canvas的填充：
一般繪圖的方式有兩種，即填充和描邊，前面的文章已經講了描邊的方法stroke，本文就講一下Canvas中填充圖形的方法。 填充即fill(),很直白吧？而且和strokeStyle表示描邊樣式一樣，fillStyle即表示填充樣式。預設的填充樣式是不透明的黑色：

ctx.fillStyle = '顏色';    //設定填充顏色
ctx.fill();                //填充

canvas裡提供了繪製矩形的方法：

ctx.strokeRect(x,y,w,h)   //x，y表示起始座標；w，h表示寬高；

可以使用fillRect()直接填充一個矩形：

ctx.fillRect(x,y,width,height);

canvas的漸變：
在Canvas中，漸變色同樣分為兩種，即** 線性漸變 和 徑向漸變 **，而且建立他們的方法也是獨立的。

• ** 建立線性漸變。createLinearGradient(譯:建立線性漸變)，的語法如下：**

createLinearGradient**(x1,y1,x2,y2);

有4個引數！x1,y1就是表示線性漸變的起點座標，x2,y2就表示終點座標。我們先建立一個水平的線性漸變試試吧:

var linear = ctx.createLinearGradient(100,100,200,100);

漸變建立了，開始填充。往漸變條里加顏色的方法是addColorStop(透明度,color).但要注意了，這個addColorStop不是加在畫筆上，而是加在前面的那個儲存漸變的變數上，我這裡是canvas:

var canvas= ctx.createLinearGradient(100,100,200,100);
canvas.addColorStop(0,'#fff');
canvas.addColorStop(0.5,'#f0f');
canvas.addColorStop(1,'#333');

這時候，我們就可以填充漸變色了，但我們必須先把定義好的漸變賦給fillStyle：

var cvs = document.getElementById('cvs'); //畫布
var ctx = cvs.getContext('2d'); // 畫筆
var canvas= ctx.createLinearGradient(100,100,200,100);
canvas.addColorStop(0,'#fff');
canvas.addColorStop(0.5,'#f0f');
canvas.addColorStop(1,'#333');
ctx.fillStyle = canvas; //把漸變賦給填充樣式
ctx.fillRect(100,100,100,100);
ctx.stroke();

• ** 建立徑向漸變。createRadialGradien(圓形漸變)，的語法如下：**

createRadialGradient(x1,y1,r1,x2,y2,r2)

其中的x1,y1,x2,y2依舊錶示起點和終點，不過這裡的起點和終點都是一個圓，而x,y則是圓心的座標。所以，r1與r2分別是起點圓的半徑和終點圓的半徑。

• 在我的印象中，貌似徑向漸變就是一個圓，圓心就是起點，圓的半徑就是終點。但canvas裡面的徑向漸變不一樣，起點一個圓，終點一個圓，和我的理解有差距。我們舉最簡單的例子。做一個很正規的徑向漸變，即漸變圓形的圓心就是漸變的起點。由於正規的徑向漸變，中心即圓心，所以我們應該儘量避免發生偏斜。那麼，我們把終點圓的圓心與起點圓的圓心要重合：

var cvs = document.getElementById('cvs'); //畫布
var ctx = cvs.getContext('2d'); // 畫筆
var radial = ctx.createRadialGradient(55,55,10,55,55,55); //重合的圓心座標
radial.addColorStop(0,'#fff');
radial.addColorStop(0.5,'#ff0');
radial.addColorStop(0.9,'#555');
radial.addColorStop(1,'#f00');
ctx.fillStyle = canvas; //把漸變賦給填充樣式
ctx.fillRect(100,100,100,100);
ctx.stroke();

這裡我設定的徑向漸變起點圓和終點圓的圓心座標相同，而起點圓半徑為10，終點圓半徑為55.最後畫出的徑向漸變範圍是一個寬高110的圓形，說明漸變範圍以終點圓的範圍為準。

Canvas的基本介紹先介紹到這裡，下一篇文章繼續介紹canvas如何繪製曲線及繪製基本圖形；如果對您有所幫助的話，請點贊並關注哦，我會不定時的更新一下自己學習的經驗以及見解，和大家進行交流。

您贊就是是我最大的動力！！！