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

成都創(chuàng)新互聯(lián)公司成都網(wǎng)站建設(shè)按需搭建網(wǎng)站，是成都網(wǎng)站設(shè)計(jì)公司,為輕質(zhì)隔墻板提供網(wǎng)站建設(shè)服務(wù),有成熟的網(wǎng)站定制合作流程，提供網(wǎng)站定制設(shè)計(jì)服務(wù)：原型圖制作、網(wǎng)站創(chuàng)意設(shè)計(jì)、前端HTML5制作、后臺程序開發(fā)等。成都網(wǎng)站建設(shè)熱線：028-86922220

HTML5 標(biāo)簽用于繪制圖像（通過JavaScript）。 元素本身并沒有繪制能力，它相當(dāng)于一塊畫布，需要使用js腳本來填充，實(shí)現(xiàn)繪繪制。

注意：

Internet Explorer 9、Firefox、Opera、Chrome 和 Safari 都支持 標(biāo)簽的屬性及方

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

的使用

簡單的說明，代碼如下：

   設(shè)置畫布容器

1.獲取容器信息

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

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

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

3.繪制簡單線條（舉例）

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

4.繪制結(jié)束

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

繪制圖像的方式：

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

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

test.fillStyle//填充的樣式

例如：

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

繪制空心矩形：

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

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

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

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

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

示例如下：

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

效果如下圖：

繪制圓：

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

線性漸變：

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

圓形徑向漸變：

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

圖形的旋轉(zhuǎn) rotate()　　

test.rotate(Math.PI/4); // 意思是坐標(biāo)軸旋轉(zhuǎn)的度數(shù)

圖形的平移   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'; // 設(shè)置陰影的顏色

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

圖形的組合 :

test.globalCompositeOperation=type;

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

type值：

source-over（默認(rèn)值）:  在原有圖形上繪制新圖形

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

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

copy:  只顯示新圖形 

上述內(nèi)容就是HTML5中如何使用 畫布，你們學(xué)到知識或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識儲備，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。