這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)?lái)有關(guān)html5 canvas常用屬性方法有哪些，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。
首先引入標(biāo)簽就不必說(shuō)了。
其次就是得到canvas的2d環(huán)境了( var ctx = canvasDom.getContext('2d') )。
現(xiàn)在呢，你可能想畫點(diǎn)什么東西。畫東西之前你要確定好一些東西，比如:
ctx.fillStyle：這是一個(gè)用來(lái)確定填充顏色的屬性。(帶fill都和填充有關(guān))
ctx.strokeStyle：這是一個(gè)用來(lái)確定"筆路徑"(就像是線條)的屬性。(帶stroke都和描線有關(guān))
ctx.shadow++：這是有4個(gè)設(shè)置所畫圖形陰影的屬性(shadowColor,shadowBlur,shadowOffsetX,shadowOffsetY)，我不常用，略。
ctx.lineWidth：這是4個(gè)設(shè)置線條樣式的屬性(lineCap,lineJoin,lineWidth,miterLimit)中最常用的，設(shè)置線寬，值為帶px的string。
ctx.font：這是設(shè)置文本()的字體大小和字體樣式，值可以是"30px"，也可以是"30px Microsoft yahei"。同時(shí)配合ctx.textAlign和ctx.baseline設(shè)置對(duì)齊位置和基線位置。然后通過(guò)ctx.filltext()或者ctx.strokeText()繪制文字，還有ctx.measureText()返回一個(gè)對(duì)象，里面包含文本的信息，比如width,height。
了解了上面這些基礎(chǔ)屬性后，你就可以畫點(diǎn)什么了:
想要顯示點(diǎn)什么東西，流程大概是先弄路徑(路徑是看不見(jiàn)的)，然后再通過(guò)ctx.fill()或ctx.stroke來(lái)對(duì)路徑進(jìn)行填充或描線。
你可以用ctx.rect(x,y,width,height)或ctx.arc(x,y,radius,startAngle,endAngle,anticolorwise)先弄一個(gè)路徑，然后在fill或者stroke。
當(dāng)然矩形有ctx.fillRect()和ctx.strokeRect()直接弄一個(gè)可見(jiàn)的方形。(圓沒(méi)有這兩個(gè)方法)
最后再介紹一個(gè)黑板擦--ctx.clearRect(x,y,weight,height)，用來(lái)清除該方框內(nèi)的所有像素。
還有一個(gè)為了防止之前的路徑干擾，可以在每次畫之前都ctx.beginPath()來(lái)清掉之前的路徑。
以上就是基本的canvas的使用，下面就來(lái)聊點(diǎn)高(yong)級(jí)(bu)點(diǎn)(shang)的。
矩形樣式的漸變填充:
var grd = ctx.createLinearGradient(x0,y0,x1,y1); grd.addColorStop(0,"black"); grd.addColorStop(1,"white"); ctx.fillstyle = grd; ctx.fillRect(x,y,w,h);
這一趟下來(lái)相當(dāng)于是先預(yù)定義了一個(gè)漸變樣式(可填充或者描線)，將樣式設(shè)置好后進(jìn)行填充或者描線。
還有createRadialGradient()配合addColorStop設(shè)置放射狀的樣式。
媒體(圖片、視頻、其他canvas)的填充:
var img = imgDom; var pat = ctx.createPattern(img,"repeat");
然后這個(gè)pat就可以給ctx.++Style，從而進(jìn)行填充或者描線等。
其中pattern有四種:repeat(默認(rèn))，repeat-x，repeat-y，no-repeat。
自定義路徑:
利用ctx.moveTo(x,y);把路徑起點(diǎn)移動(dòng)到(x,y) ，然后配合lineTo(x,y)，就可以得到路徑，就可以描線顯示出來(lái)。
當(dāng)然如果你想填充，但是可能路徑?jīng)]有閉合，可以利用ctx.closePath()閉合路徑，然后進(jìn)行填充。
畫布切割:
使用ctx.clip()可以根據(jù)當(dāng)前已閉合的路徑來(lái)剪切畫布，被剪切的畫布部分就不能被操作了。
可以通過(guò)ctx.save()對(duì)當(dāng)前區(qū)域先進(jìn)行保存，然后通過(guò)ctx.restore()進(jìn)行恢復(fù)。
畫圓弧:
畫圓弧通過(guò)ctx.arcTo(x0,y0,x1,y1,radius);通過(guò)兩點(diǎn)和半徑確定弧線，來(lái)得到路徑，然后根據(jù)需要填充或者描線。
判斷點(diǎn)是否在路徑內(nèi):
ctx.isPointInPath();返回布爾值，沒(méi)啥好說(shuō)的。
有一種曲線叫 貝塞爾:
先用ctx.moveTo()移至起始點(diǎn)。
ctx.quadraticCurveTo(c1x,c1y,edx,edy);利用起點(diǎn)和一個(gè)控制點(diǎn)加終點(diǎn)的貝塞爾曲線；
ctx.beizierCurveTo(c1x,c1y,c2x,c2y,edx,edy);利用兩個(gè)控制點(diǎn)繪制的貝塞爾曲線。
圖形轉(zhuǎn)換:
ctx.scale(w,h);放大w>1就是寬度上放大,h就是高度上。
ctx.rotate(r);r為弧度單位，如20度:20*Math.PI/180。順時(shí)針。
ctx.translate(x,y)設(shè)置畫布上(0,0)的位置，(x,y)就是當(dāng)前(0,0)的位置。
ctx.transform(a,b,c,d,e,f);分別是水平縮放、水平傾斜、垂直傾斜、垂直縮放、水平位移、垂直位移。該屬性會(huì)疊加，對(duì)下一個(gè)圖形有效。
ctx.setTransform(a,b,c,d,e,f);同上，該屬性會(huì)重新定義一個(gè)transform，對(duì)下一個(gè)圖形有效。
drawImage():
ctx.drawImage(dom,arg1,arg2,arg3,arg4,arg5,arg6,arg7,arg8);除了dom外最多還可以傳8個(gè)參數(shù),傳2個(gè)是定位圖像(原尺寸)，傳4個(gè)是按大小定位圖像，傳8個(gè)是剪切后定位圖像(分別是:剪切開(kāi)始x,y，剪切大小w,h，定位位置x,y，大小w,h)。
globalAipha屬性:設(shè)置全局透明度。(已經(jīng)畫好的不受影響)。
globalCompositeOperation 屬性 設(shè)置上一個(gè)和下一個(gè)重疊區(qū)的層疊順序，有"source-over"，"destination-over"，哪個(gè)over，哪個(gè)在下面。
上述就是小編為大家分享的html5 canvas常用屬性方法有哪些了，如果剛好有類似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司行業(yè)資訊頻道。
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。
重慶分公司
重慶分公司
