html5 canvas常用屬性方法有哪些

這期內容當中小編將會給大家帶來有關html5 canvas常用屬性方法有哪些，文章內容豐富且以專業的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

首先引入<canvas></canvas>標簽就不必說了。

其次就是得到canvas的2d環境了( var ctx = canvasDom.getContext('2d') )。

現在呢，你可能想畫點什么東西。畫東西之前你要確定好一些東西，比如:

　ctx.fillStyle：這是一個用來確定填充顏色的屬性。(帶fill都和填充有關)
  ctx.strokeStyle：這是一個用來確定"筆路徑"(就像是線條)的屬性。(帶stroke都和描線有關)
  ctx.shadow++：這是有4個設置所畫圖形陰影的屬性(shadowColor,shadowBlur,shadowOffsetX,shadowOffsetY)，我不常用，略。
  ctx.lineWidth：這是4個設置線條樣式的屬性(lineCap,lineJoin,lineWidth,miterLimit)中最常用的，設置線寬，值為帶px的string。
  ctx.font：這是設置文本()的字體大小和字體樣式，值可以是"30px"，也可以是"30px  Microsoft yahei"。同時配合ctx.textAlign和ctx.baseline設置對齊位置和基線位置。然后通過ctx.filltext()或者ctx.strokeText()繪制文字，還有ctx.measureText()返回一個對象，里面包含文本的信息，比如width,height。

了解了上面這些基礎屬性后，你就可以畫點什么了:

想要顯示點什么東西，流程大概是先弄路徑(路徑是看不見的)，然后再通過ctx.fill()或ctx.stroke來對路徑進行填充或描線。

你可以用ctx.rect(x,y,width,height)或ctx.arc(x,y,radius,startAngle,endAngle,anticolorwise)先弄一個路徑，然后在fill或者stroke。

當然矩形有ctx.fillRect()和ctx.strokeRect()直接弄一個可見的方形。(圓沒有這兩個方法)

最后再介紹一個黑板擦--ctx.clearRect(x,y,weight,height)，用來清除該方框內的所有像素。

還有一個為了防止之前的路徑干擾，可以在每次畫之前都ctx.beginPath()來清掉之前的路徑。

以上就是基本的canvas的使用，下面就來聊點高(yong)級(bu)點(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);

這一趟下來相當于是先預定義了一個漸變樣式(可填充或者描線)，將樣式設置好后進行填充或者描線。

還有createRadialGradient()配合addColorStop設置放射狀的樣式。

媒體(圖片、視頻、其他canvas)的填充:　　

var img = imgDom;
var pat = ctx.createPattern(img,"repeat");

然后這個pat就可以給ctx.++Style，從而進行填充或者描線等。

其中pattern有四種:repeat(默認)，repeat-x，repeat-y，no-repeat。

自定義路徑:

利用ctx.moveTo(x,y);把路徑起點移動到(x,y) ，然后配合lineTo(x,y)，就可以得到路徑，就可以描線顯示出來。

當然如果你想填充，但是可能路徑沒有閉合，可以利用ctx.closePath()閉合路徑，然后進行填充。

畫布切割:

使用ctx.clip()可以根據當前已閉合的路徑來剪切畫布，被剪切的畫布部分就不能被操作了。

可以通過ctx.save()對當前區域先進行保存，然后通過ctx.restore()進行恢復。

畫圓弧:

畫圓弧通過ctx.arcTo(x0,y0,x1,y1,radius);通過兩點和半徑確定弧線，來得到路徑，然后根據需要填充或者描線。

判斷點是否在路徑內:

ctx.isPointInPath();返回布爾值，沒啥好說的。

有一種曲線叫 貝塞爾:

　　先用ctx.moveTo()移至起始點。

　　ctx.quadraticCurveTo(c1x,c1y,edx,edy);利用起點和一個控制點加終點的貝塞爾曲線；

　　ctx.beizierCurveTo(c1x,c1y,c2x,c2y,edx,edy);利用兩個控制點繪制的貝塞爾曲線。

圖形轉換:

　　　　ctx.scale(w,h);放大w>1就是寬度上放大,h就是高度上。

　　　　ctx.rotate(r);r為弧度單位，如20度:20*Math.PI/180。順時針。

　　　　ctx.translate(x,y)設置畫布上(0,0)的位置，(x,y)就是當前(0,0)的位置。

　　　　ctx.transform(a,b,c,d,e,f);分別是水平縮放、水平傾斜、垂直傾斜、垂直縮放、水平位移、垂直位移。該屬性會疊加，對下一個圖形有效。

　　　　ctx.setTransform(a,b,c,d,e,f);同上，該屬性會重新定義一個transform，對下一個圖形有效。

drawImage():

　　ctx.drawImage(dom,arg1,arg2,arg3,arg4,arg5,arg6,arg7,arg8);除了dom外最多還可以傳8個參數,傳2個是定位圖像(原尺寸)，傳4個是按大小定位圖像，傳8個是剪切后定位圖像(分別是:剪切開始x,y，剪切大小w,h，定位位置x,y，大小w,h)。

　　globalAipha屬性:設置全局透明度。(已經畫好的不受影響)。

　　globalCompositeOperation 屬性 設置上一個和下一個重疊區的層疊順序，有"source-over"，"destination-over"，哪個over，哪個在下面。

上述就是小編為大家分享的html5 canvas常用屬性方法有哪些了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關知識，歡迎關注億速云行業資訊頻道。