一、簡(jiǎn)單圖形，整套的屬性和方法專門用于繪制矩形：

1、fillStyle可以設(shè)置為CSS顏色、一個(gè)圖案或一種顏色漸變。fillStyle默認(rèn)是純黑色，你可以設(shè)置成你喜歡的任意顏色。只要頁面打開著，每個(gè)繪圖上下文都會(huì)記錄自己的屬性，除非你重置過它。
2、fillRect(x,y,width,height)繪制一個(gè)矩形，并以當(dāng)前的fillStyle來填充。
3、srtokeStyle和fillStyle一樣，可以設(shè)置為CSS顏色、一個(gè)圖案或一種顏色漸變。
4、strokeRect（x,y,width,height）使用當(dāng)前的storke style來繪制一個(gè)矩形，strokeRect并不填充中間區(qū)域，而只繪制矩形的邊緣。
5、clearRect(x,y,width,height)清除指定矩形區(qū)域的像素。
二、路徑
按照慣例，不論開始繪制何種圖形，第一個(gè)需要調(diào)用的就是beginPath。這個(gè)簡(jiǎn)單的函數(shù)不帶任何參數(shù)，它用來通知canvas將要開始繪制一個(gè)新的圖形了。對(duì)于canvas來說，beginPath函數(shù)最大的用處是canvas需要據(jù)此來計(jì)算圖形的內(nèi)部和外部的范圍，以便完成后續(xù)的描邊和填充。
路徑會(huì)跟蹤當(dāng)前坐標(biāo)，默認(rèn)值是原點(diǎn)。canvas本身也跟蹤當(dāng)前坐標(biāo)，不過可能通過繪制代碼來修改。
每一個(gè)canvas都有一個(gè)路徑，定義路徑就如同用鉛筆作畫。你可以任意作地畫，但它不一定是最終作品的一部分，直到你拿起畫筆沾上墨水描繪這條路徑。
moveTo(x,y)：不繪制，只是將當(dāng)前位置移動(dòng)到新目標(biāo)坐標(biāo)（x,y），并作為線條開始點(diǎn)。
lineTo(x,y)：繪制線條到指定的目標(biāo)坐標(biāo)(x,y)，并且在兩個(gè)坐標(biāo)之間畫一條直線。不管調(diào)用它們哪一個(gè)，都不會(huì)真正畫出圖形，因?yàn)槲覀冞€沒有主，調(diào)用stroke（繪制）和fil（填充）函數(shù)。當(dāng)前，只是在定義路徑的位置，以便后面繪制時(shí)使用。
closePath()，這個(gè)函數(shù)跟lineTo很像，唯一的差別在于closePath會(huì)將路徑的起始坐標(biāo)自動(dòng)作為目標(biāo)坐標(biāo)。closePath還會(huì)通知canvas當(dāng)前繪制的圖形已經(jīng)閉合或者形成了完全封閉的區(qū)域。起連接起點(diǎn)，閉合路徑的作用。
三、文本
操作canvas文本的方式與操作其他路徑對(duì)象的方式相同：可以描繪文本輪廓和填充文本內(nèi)部，同時(shí)，所有能夠應(yīng)用于其他圖形的變換和樣式都能用于文本。context對(duì)象的文本繪制功能由兩個(gè)函數(shù)組成：
fillText(text,x,y,maxwidth)
trokeText(text,x,y,maxwidth)
兩個(gè)的參數(shù)完全相同，必選參數(shù)包括文本參數(shù)以及用于指定文本位置的坐標(biāo)參數(shù)。maxwidth是可選參數(shù)，用于限制字體大小，它會(huì)將文本字體強(qiáng)制收縮到指定尺寸。此外，還有一個(gè)measureText函數(shù)可供使用，該函數(shù)會(huì)返回一個(gè)度量對(duì)象，其包含了在當(dāng)前context環(huán)境下指定文本的實(shí)際顯示寬度。
為了保證文本在各瀏覽器下都能正常顯示，在繪制上下文里有以下字體屬性
1、font可以是CSS字體規(guī)則中的任何值。包括：字體樣式、字體變種、字體大小與粗細(xì)、行高和字體名稱。
2、textAlign控制文本的對(duì)齊方式。它類似于（但不完全相同）CSS中的text-align。可能的取值為：start,end,left,right,和center.
3、textBaseline控制文本相對(duì)于起點(diǎn)的位置?？梢匀≈涤衪op,hanging,middle,alphabetic,ideographic和bottom。對(duì)于簡(jiǎn)單的英文字母，可以放心的使用top,middle或bottom作為文本基線。
四、顏色漸變
一旦我們擁有了繪圖上下文，就可以開始定義一個(gè)顏色漸變。漸變是兩種或更多顏色的平滑過度。canvas的繪圖上下文支持兩種類型的漸變：
1、createLinearGradient(x0,y0,x1,x1)沿著直線從（x0,y0)至(x1,y1)繪制漸變。
2、createRadialGradient(x0,y0,r0,x1,y1,r1)沿著兩個(gè)圓之間的錐面繪制漸變。前三個(gè)參數(shù)代表開始的圓，圓心為（x0,y0），半徑為r0。最后三個(gè)參數(shù)代表結(jié)束的圓，圓心為(x1,y1)，半徑為r1。
五、圖片
canvas的繪圖上下文中定義了幾種繪制圖片的方法：
1、drawIamge(image,dx,dy)接受一個(gè)圖片，并將之畫到canvaa中。給出的坐標(biāo)（dx,dy）代表圖片的左上角。比如，坐標(biāo)（0，0）將把圖片畫到canvas的左上角。
2、drawIamge(image,dx,dy,dw,dh)接受一個(gè)圖片，將其縮放為寬度dw和高度dh，然后把它畫到canvas上的(dx,dy)位置。
3、drawIamge(image,sx,sy,sw,sh,dx,dy,dw,dh)接受一個(gè)圖片，通過參數(shù)（sx,sy,sw,sh）指定圖片裁剪的范圍，縮放到(dw,dh)的大小，最后把它畫到canvas上的(dx,dy)位置。
要在canvas上繪制圖像，需要一先有一個(gè)圖片。這個(gè)圖片可以是已經(jīng)存在的HTML5_Canvas_屬性、定義及方法(學(xué)習(xí)筆記)元素，或者通過JS創(chuàng)建。無論采用哪種方式，都需要在繪制canvas之前，完全加載這張圖片。瀏覽器通常會(huì)在頁面腳本執(zhí)行的同時(shí)異步加載圖片。如果試圖在圖片未完全加載之前就將其呈現(xiàn)到canvas上，那么canvas將不會(huì)顯示任何圖片。
六、漸變
漸變是指在顏色集上使用逐步抽樣算法，并將結(jié)果應(yīng)用于描邊樣式和填充樣式中。使用漸變需要三個(gè)步驟：
（1）創(chuàng)建漸變對(duì)象
（2）為漸變對(duì)象設(shè)置顏色，指明過渡方式
（3）在context上為填充樣式或者描邊樣式設(shè)置漸變
要設(shè)置顯示哪種顏色，在漸變對(duì)象上使用addColorStop函數(shù)即可。這個(gè)函數(shù)允許指定兩個(gè)參數(shù)：顏色和偏移量。顏色參數(shù)是指開發(fā)人員希望在偏移位置描邊或填充時(shí)所使用的顏色。偏移量是一個(gè)0.0到1.0之間的數(shù)值，代表沿著漸變線漸變的距離有多遠(yuǎn)。
除了可以變換成其他顏色外，還可以為顏色設(shè)置alpha值（例如透明），并且alpha值也是可以變化的。為了達(dá)到這樣的效果，需要使用顏色值的另一種表示方法，例如內(nèi)置alpha組件的CSSrgba函數(shù).
除了線性漸變以外，HTML5 Canvas API還支持放射性漸變，所謂放射性漸變就是顏色會(huì)介于兩個(gè)指定圓間的錐形區(qū)域平滑變化。放射性漸變和線性漸變使用的顏色終止點(diǎn)是一樣的：參數(shù)如下：
createRadialGradient(x0,y0,r0,x1,y1,r1)
代碼中，前三個(gè)參數(shù)代表以(x0,y0)為圓心，r0為半徑，后三個(gè)參數(shù)代表以(x1,y1)為圓心，r1為半徑的另一個(gè)圓。漸變會(huì)在兩個(gè)圓中間的區(qū)域出現(xiàn)。
七、背景圖
直接繪制圖像有很多用處，但在某些情況下，像CSS那樣使用圖片作為背景也非常有用。HTML5Canvas API還支持圖片平鋪。調(diào)用createPattern函數(shù)。
八、繪制曲線（二次曲線）
quadraticCurveTo函數(shù)繪制曲線的起點(diǎn)是當(dāng)前坐標(biāo)，帶有兩組（x,y）參數(shù)，第二組是指曲線的終點(diǎn)。第一組代表控制點(diǎn)。所謂控制點(diǎn)位于曲線的旁邊（不是曲線之上），其作用相當(dāng)于對(duì)曲線產(chǎn)生一個(gè)拉力。通過調(diào)整控制點(diǎn)的位置，就可以改變曲線的曲率。
HTML5 Canvas API的其他曲線功能還涉及bezierCurveTo、arcTo和arc函數(shù)。這些函數(shù)通過多種控制點(diǎn)（如半徑、角度等）讓曲線更具可塑性。
九、縮放canvas對(duì)象
scale(x,y)，這個(gè)函數(shù)帶有兩個(gè)參數(shù)來分別代表在x,y兩個(gè)維度的值。每個(gè)參數(shù)在canvas顯示圖像的時(shí)候，向其傳遞在本方向軸上圖像要放大（或者縮?。┑牧?。如果x值為2，就代表所繪制圖像中全部元素都會(huì)變成兩倍寬。如果y值為0.5，繪制出來的圖像全部元素都會(huì)變成之前的一半高。
注：要在原點(diǎn)執(zhí)行圖形和路徑的變換操作，執(zhí)行完成以后再統(tǒng)一平移。理由是綻放（scale）和旋轉(zhuǎn)（rotate）等變換操作都是針對(duì)原點(diǎn)進(jìn)行的。如果對(duì)一個(gè)人不在原點(diǎn)的圖形進(jìn)行旋轉(zhuǎn)變換，那么rotate變換函數(shù)會(huì)將圖形繞著原點(diǎn)旋轉(zhuǎn)而不是在原地旋轉(zhuǎn)。與之類似，如果進(jìn)行縮放操作時(shí)沒有將放置到合適的坐標(biāo)上，那么所有路徑坐標(biāo)都會(huì)被同時(shí)縮放。取決于縮放比例的大小，新的坐標(biāo)可能會(huì)全部超出canvas范圍，進(jìn)而給開發(fā)人員帶來困惑，為什么我的縮放操作會(huì)把圖像刪了？
十、變換
變換操作并不限于縮放和平移，我們可以使用函數(shù)context.rotate(angle)來旋轉(zhuǎn)圖像，甚至可以直接修改底層變換矩陣以完成一些高級(jí)操作，如剪裁圖像的繪制路徑。如：context.rotate(1.57)，旋轉(zhuǎn)角度參數(shù)以弧度為單位。
beginPath()：開始
moveTo(x,y)：起點(diǎn)坐標(biāo)
lineTo(x,y)：目標(biāo)坐標(biāo)
closePath()：連接起點(diǎn)，閉合路徑
translate()：移動(dòng)
rotate()：旋轉(zhuǎn)
restore()：恢復(fù)
scale()：縮放
save()：保存
rotate(angle)：旋轉(zhuǎn)圖像
quadraticCurveTo()：繪制曲線
stroke()：繪制
strokeText()：描繪文本輪廓
strokeStyle()：顏色設(shè)置
strokeRect()：使用當(dāng)前的storke style來繪制一個(gè)矩形，而只繪制矩形的邊緣。
fill：填充
fillRect()：繪制一個(gè)矩形，并以當(dāng)前的fillStyle來填充
fillStyle()：樣式填充
fillText：填充文本內(nèi)容
drawIamge()：圖片填充
createPattern()：使用背景圖片填充
addColorStop()：漸變填充
createRadialGradient()：放射性漸變
clearRect()：清除指定矩形區(qū)域的像素
.lineCap（butt | square | round）：指定線條末端的樣式
.fillStyle：設(shè)置為CSS顏色、一個(gè)圖案或一種顏色漸變
.lineWidth：線條寬度設(shè)置
.lineJoin(round)：修改當(dāng)前形狀中線段的連接方式，讓拐角變得更圓滑
.shadowColor：任何css中的顏色值，可以使用透明度(alpha)
.shadowOffsetX：像素值，值為正數(shù)，向右移動(dòng)陰影;值為負(fù)數(shù)，向左移動(dòng)陰影
.shadowOffsetY：像素值，值為正數(shù)，向下移動(dòng)陰影;值為負(fù)數(shù)，向上移動(dòng)陰影
.shadowBlur：高斯模糊值，值越大，陰影越模糊

矩形

我們?cè)谏弦徽轮挥镁€來畫了一個(gè)矩形，其實(shí)可以一下子就畫出來的，用下面函數(shù)：

ctx.fillRect(x, y, width, height)

畫一個(gè)填充的矩形，x, y是矩形左上坐標(biāo)，剩余兩個(gè)不是右下坐標(biāo)而是寬度和高度。
ctx.strokeRect(x, y, width, height)

類似的，不過只畫線不填充。
ctx.clearRect(x, y, width, height)

把指定的區(qū)域刪除。

我們先準(zhǔn)備三個(gè)Canvas，(html代碼如下）：

fillRect()

strokeRect()

clearRect()

然后是我們的繪圖參數(shù)：

JavaScript

onload = function() {
  draw1();
  draw2();
  draw3();
};
/* fillRect() */
function draw1() {
  var canvas = document.getElementById('c1');
  if ( ! canvas || ! canvas.getContext ) { return false; }
  var ctx = canvas.getContext('2d');
  ctx.beginPath();
  ctx.fillRect(20, 20, 80, 40);
}
/* strokeRect() */
function draw2() {
  var canvas = document.getElementById('c2');
  if ( ! canvas || ! canvas.getContext ) { return false; }
  var ctx = canvas.getContext('2d');
  ctx.beginPath();
  ctx.strokeRect(20, 20, 80, 40);
}
/* clearRect() */
function draw3() {
  var canvas = document.getElementById('c3');
  if ( ! canvas || ! canvas.getContext ) { return false; }
  var ctx = canvas.getContext('2d');
  ctx.beginPath();
  ctx.fillRect(20, 20, 100, 100);
  ctx.beginPath();
  ctx.clearRect(50, 70, 60, 30);
}
結(jié)果如下圖所示，就不提供實(shí)際的演示文件了，請(qǐng)自己輸入確認(rèn)。

上一次我們使用線繪的時(shí)候，還是用了fill和stroke方法，現(xiàn)在是不需要的。

圓（?。?/p>

先看一下參數(shù)：

ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise)
畫圓或者圓弧。x,y為圓心坐標(biāo)，radius為半徑，startAngle,endAngle為開始/結(jié)束劃圓的角度，anticlockwise為是否逆時(shí)針畫圓（True為逆時(shí)針，F(xiàn)alse為順時(shí)針）。
注意這里的角度為弧度制，所以如果畫一個(gè)正圓的話，是0 -> Math.PI * 2，而畫60°的話，就是0 -> 60 * Math.PI / 180，最過分的是，這個(gè)和我們一般幾何里的x方向0°，y方向90°反過來了……利用上面的Canvas，再畫圓試試：

JavaScript

onload = function() {
  draw1();
  draw2();
  draw3();
};
/* 整個(gè)圓 */
function draw1() {
  var canvas = document.getElementById('c1');
  if ( ! canvas || ! canvas.getContext ) { return false; }
  var ctx = canvas.getContext('2d');
  ctx.beginPath();
  ctx.arc(70, 70, 60, 0, Math.PI*2, false);
  ctx.stroke();
}
/* 10° ~ 80°，無填充 */
function draw2() {
  var canvas = document.getElementById('c2');
  if ( ! canvas || ! canvas.getContext ) { return false; }
  var ctx = canvas.getContext('2d');
  ctx.beginPath();
  ctx.arc(70, 70, 60, 10 * Math.PI / 180, 80 * Math.PI / 180, true);
  ctx.stroke();
}
/* 10° ~ 80°，填充 */
function draw3() {
  var canvas = document.getElementById('c3');
  if ( ! canvas || ! canvas.getContext ) { return false; }
  var ctx = canvas.getContext('2d');
  ctx.beginPath();
  ctx.arc(70, 70, 60, 10 * Math.PI / 180, 80 * Math.PI / 180, true);
  ctx.fill();
}
結(jié)果如下圖的上三個(gè)情況，也請(qǐng)自己輸入加深印象。

下圖為startAngle=1.1PI，endAngle=1.9PI，anticlockwise為false的情況下的繪制情況，注意從x軸方向開始，往下走角度開始。

HTML5中的Canvas（顏色）

指定顏色

現(xiàn)在為止我們畫的圖形都是黑色的，這是Canvas繪制的默認(rèn)色彩，要想換一種顏色的話，就得在實(shí)際畫之前指定顏色。

ctx.strokeStyle = color

——　指定繪制線的顏色

ctx.fillStyle = color

——　指定填充的顏色
來看看實(shí)際的例子：

JavaScript

onload = function() {
  draw();
};
function draw() {
  var canvas = document.getElementById('c1');
  if ( ! canvas || ! canvas.getContext ) { return false; }
  var ctx = canvas.getContext('2d');
  ctx.beginPath();
  ctx.fillStyle = 'rgb(192, 80, 77)'; // 紅
  ctx.arc(70, 45, 35, 0, Math.PI*2, false);
  ctx.fill();
  ctx.beginPath();
  ctx.fillStyle = 'rgb(155, 187, 89)'; // 綠
  ctx.arc(45, 95, 35, 0, Math.PI*2, false);
  ctx.fill();
  ctx.beginPath();
  ctx.fillStyle = 'rgb(128, 100, 162)'; // 紫
  ctx.arc(95, 95, 35, 0, Math.PI*2, false);
  ctx.fill();
}

效果如下圖：

指定透明度

和普通的CSS中一樣，我們指定顏色的時(shí)候還可以帶一個(gè)alpha值（不過用的不多，IE9之前都不支持）?？创a：

onload = function() {
  draw();
};
function draw() {
  var canvas = document.getElementById('c1');
  if ( ! canvas || ! canvas.getContext ) { return false; }
  var ctx = canvas.getContext('2d');
  ctx.beginPath();
  ctx.fillStyle = 'rgba(192, 80, 77, 0.7)'; //
  ctx.arc(70, 45, 35, 0, Math.PI*2, false);
  ctx.fill();
  ctx.beginPath();
  ctx.fillStyle = 'rgba(155, 187, 89, 0.7)'; //
  ctx.arc(45, 95, 35, 0, Math.PI*2, false);
  ctx.fill();
  ctx.beginPath();
  ctx.fillStyle = 'rgba(128, 100, 162, 0.7)'; //
  ctx.arc(95, 95, 35, 0, Math.PI*2, false);
  ctx.fill();
}

結(jié)果就是下面這樣：

和上面的代碼基本沒變化，就是把rgb(r, g, b)變成了rgba(r, g, b, a)而已，a的值也是0~1，0表示完全透明，1則是完全不透明（所以alpha的值實(shí)際上是“不透明度”）。

全局透明度

上面我們給每一個(gè)圓加了0.7的alpha值，不過我們每個(gè)圓的alpha都是一樣的，每個(gè)都寫一遍未免有些麻煩（說是我沒覺得麻煩……只不過不這么說就沒法引出這個(gè)新功能啊：）

ctx.globalAlpha = alpha

這個(gè)參數(shù)指定了全局的alpha值，這么設(shè)定之后，所有畫的圖案都會(huì)有這么點(diǎn)的透明，除非你又特別指定了。所以把我們的第一個(gè)例子稍微改一下：

onload = function() {
  draw();
};
function draw() {
  var canvas = document.getElementById('c1');
  if ( ! canvas || ! canvas.getContext ) { return false; }
  var ctx = canvas.getContext('2d');
  ctx.globalAlpha = 0.7;    // 就多了這么一句
  ctx.beginPath();
  ctx.fillStyle = 'rgb(192, 80, 77)';
  ctx.arc(70, 45, 35, 0, Math.PI*2, false);
  ctx.fill();
  ctx.beginPath();
  ctx.fillStyle = 'rgb(155, 187, 89)';
  ctx.arc(45, 95, 35, 0, Math.PI*2, false);
  ctx.fill();
  ctx.beginPath();
  ctx.fillStyle = 'rgb(128, 100, 162)';
  ctx.arc(95, 95, 35, 0, Math.PI*2, false);
  ctx.fill();
}
然后我們的結(jié)果就和2完全一樣了：

畫圖多的時(shí)候，還是能少打很多字的。