本章帶給大家html5 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,c2yctx.beizierCurveTo(c1x,c1y,c2x,c2yctx.beizierCurveTo(c1x,c1y,c2x,c2yctx.beizier. ,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常用屬性方法（介紹）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
