一．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，線條顏色變成了半透明的紅色。

線條寬度設置成了10px

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

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

Canvas閉合路徑 用closePath()

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

lineJoin屬性

lineCap屬性

• 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如何繪制曲線及繪制基本圖形；如果對您有所幫助的話，請點贊并關注哦，我會不定時的更新一下自己學習的經驗以及見解，和大家進行交流。

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