HTML5中如何使用 <canvas>畫(huà)布

本篇文章為大家展示了HTML5中如何使用 <canvas>畫(huà)布，內容簡(jiǎn)明扼要并且容易理解，絕對能使你眼前一亮，通過(guò)這篇文章的詳細介紹希望你能有所收獲。

HTML5 <canvas> 標簽用于繪制圖像（通過(guò)JavaScript）。<canvas> 元素本身并沒(méi)有繪制能力，它相當于一塊畫(huà)布，需要使用js腳本來(lái)填充，實(shí)現繪繪制。

注意：

Internet Explorer 9、Firefox、Opera、Chrome 和 Safari 都支持 <canvas> 標簽的屬性及方

法。但是Internet Explorer 8 及更早的IE版本不支持 <canvas> 元素。

<canvas>的使用

簡(jiǎn)單的說(shuō)明，代碼如下：

<canvas id="test-canvas" width="300" height="300">
    設置畫(huà)布容器
</canvas>

1.獲取容器信息

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

2.配置繪制環(huán)境（必要項）

var test = canvas.getContext('2d');test.beginPath(); // 意思是開(kāi)始繪制

3.繪制簡(jiǎn)單線(xiàn)條（舉例）

test.moveTo(10,10); // 這里的第一個(gè)參數是x軸，第二個(gè)參數是y軸
test.lineTo（x,y）; // 下個(gè)一個(gè)點(diǎn)坐標

4.繪制結束

test.closePath();//必須添加
test.stroke() ;

<canvas>繪制圖像的方式：

test.fill()  // 填充 
test.stroke();  // 繪制邊框

注意：在繪制前，要先設置好它們的樣式。

test.fillStyle//填充的樣式

例如：

test.fillStyle = 'red';  //填充的顏色為紅色
test.strokeStyle//邊框樣式
test.lineWidth = 8;  // 設置線(xiàn)條的寬度 為8

繪制空心矩形：

/**
*x  y  width  heigth  的參數  * 注意:繪制圖像坐標以圖像左上角為起點(diǎn)**/
test.strokeRect(100,100, 50,50);

繪制有實(shí)心矩形：

test.fillRect(100,100,100,100);   // 實(shí)心矩形

清空（在已繪制圖像上操作）：

/**
* x:清除矩形起點(diǎn)橫坐標   y:清除矩形起點(diǎn)縱坐標* width:清除矩形長(cháng)度   height:清除矩形高度**/
context.clearRect(x,y,width,height) ;

示例如下：

test.fillRect(100,100,100,100);
test.clearRect(120,120,30,30);
test.stroke()//繪制結束

效果如下圖：

繪制圓：

//
/**
*有6個(gè)參數 1.圓心的x軸坐標 2.圓心的y軸坐標 3.半徑的長(cháng)度
*4.開(kāi)始的角度（straAngle)  5.結束的角度 （endAngle) *4.開(kāi)始的角度（straAngle)  5.結束的角度 （endAngle) *6.是否是逆時(shí)針 true）為逆時(shí)針，(false)為順時(shí)針*/
context.arc(250,250,100,0,Math.PI,true); 

線(xiàn)性漸變：

var lg = test.createLinearGradient(x起始位置,y起始位置,x結束位置,y結束位置);//  offset:設定的顏色離漸變結束點(diǎn)的偏移量(0~1)  color:繪制時(shí)要使用的顏色lg.addColorStop(offset,color)test.fillStyle = lg; //添加漸變條件完成后需將添加條件賦值給testtest.fillRect(100,100,100,100)//設置圖片大小

圓形徑向漸變：

/**1. xStart:發(fā)散開(kāi)始圓心x坐標
*2. yStart:發(fā)散開(kāi)始圓心y坐標*3. radiusStart:發(fā)散開(kāi)始圓的半徑 *4. xEnd:發(fā)散結束圓心的x坐標
*5.yEnd:發(fā)散結束圓心的y坐標*6.radiusEnd:發(fā)散結束圓的半徑
**/
var rg = test.createRadialGradient(xStart,yStart,radiusStart,xEnd,yEnd,radiusEnd);

圖形的旋轉 rotate()　　　　

test.rotate(Math.PI/4); // 意思是坐標軸旋轉的度數

圖形的平移   translate()

test.translate(x,y); // x 軸的平移量 y 軸的平移量

圖形的縮放 scale()

test.scale(x,y) ； // x 軸按照x比例進(jìn)行縮放 y軸按照y比例進(jìn)行縮放

圖形的陰影:

test.shadowOffsetX = 5; // 陰影在 x 軸的偏移量

test.shadowOffsetY = 5; //陰影在 y 軸的偏移量

test.shadowColor = 'red'; // 設置陰影的顏色

test.shadowBlur = 100; // 模糊程度 （值越大越模糊）

圖形的組合 :

test.globalCompositeOperation=type;

圖形組合就是兩個(gè)圖形相互疊加了圖形的表現形式,是后畫(huà)的覆蓋掉先畫(huà)的呢，還是相互重疊的部分不顯示等等，至于怎么顯示就取決于type的值了 

type值：

source-over（默認值）:  在原有圖形上繪制新圖形

destination-over:    在原有圖形下繪制新圖形

source-in:      顯示原有圖形和新圖形的交集，新圖形在上，所以顏色為新圖形的顏色
destination-in:    顯示原有圖形和新圖形的交集，原有圖形在上，所以顏色為原有圖形的顏色
source-out:   只顯示新圖形非交集部分
destination-out:   只顯示原有圖形非交集部分
source-atop:     顯示原有圖形和交集部分，新圖形在上，所以交集部分的顏色為新圖形的顏色
destination-atop:     顯示新圖形和交集部分，新圖形在下，所以交集部分的顏色為原有圖形的顏色
lighter:    原有圖形和新圖形都顯示，交集部分做顏色疊加
xor:   重疊飛部分不現實(shí)

copy:  只顯示新圖形