1.畫布基本知識(shí)
基礎(chǔ)畫圖：cxt.fillRect畫出一個(gè)矩形
? ? <body onload="pageLoad();">
? ? ? ? <canvas id="cnvMain" width="280px" height="190px"></canvas>
? ? </body>
? ?js:
? ? function ?pageLoad(){
? ? ? ? ? var ?cnv=document.getElementById("cnvMain");
? ? ? ? ? var ?cxt=cnv.getContext("2d");
? ? ? ? ?cxt.fillStyle="#ccc";
? ? ? ? ?cxt.fillRect(30,30,80,80);
? ? ? }
以上代碼實(shí)現(xiàn)在頁面加載之后畫出一個(gè)80*80的正方形；fillStyle實(shí)現(xiàn)畫出內(nèi)容的背景顏色；
2.繪制帶邊框的矩形
? ? ? ? ?//設(shè)置邊框
? ? ? ? cxt.strokeStyle="#666";
? ? ? ? cxt.strokeRect(30,30,150,80);
? ? ? ? //清空?qǐng)D形
? ? ? ?cxt.clearRect(36,36,138,68);
3.繪制漸變圖形
? ? 直接上代碼，具體用法代碼中有注釋：
? ? ? ?運(yùn)行結(jié)果展示：
4.在畫布中使用路徑
? ? 4.1 畫直線? moveTo和lineTo結(jié)合使用
? ? ? ? ? ?cxt.moveTo(x,y); ? ?找到起始點(diǎn)
? ? ? ? ? ?cxt.lineTo(x,y); ? ?從起始點(diǎn)開始畫一條直接到結(jié)束點(diǎn)
? ? ? ? ? ? ?以上代碼從（130,30）開始到（30,100）畫一條向下的斜線，再從（30,100）到（130,160）畫一條向上的斜線，效果如下：
? ?4.2 ?使用arc方法繪制圓形
? ? ? ? ? ? ? ?cxt.arc(x,y,radius,startAngle,endAngle,anticlockwise);
? ? ? ? ? ? ? ?x,y:表示繪制的起始橫縱坐標(biāo)
? ? ? ? ? ? ? ?radius：繪制圓形的半徑
? ? ? ? ? ? ? ?startAngle，endAngle：繪制圓形的開始和結(jié)束的角度，對(duì)用來話圓弧很方便；
? ? ? ? ? ? ? ?anticlockwise：繪制方向，true：順時(shí)針；false：逆時(shí)針繪制
? ? ? ? ? ? ? ? 案例1：一個(gè)實(shí)體圓形
? ? ? ? ? ? ? ? ? ? 結(jié)果：
? ? ? ? ? ? ? ? ? ? ? ?案例2：一個(gè)邊框圓形
? ? ? ? ? ? ? ? ? ? 結(jié)果：
? ? ? ? ? ? ? ? ? ? ?案例3：銜接圓形
? ? ? ? ? ? ? ? ? ? ?結(jié)果：
? ?4.3繪制漸變圓形
? ? ? ? cxt.createRadialGradient(30,30,0,20,20,400);
? ? ? ? 參數(shù)1和參數(shù)2，參數(shù)3：開始圓的圓心橫縱坐標(biāo)以及半徑
? ? ? ? 參數(shù)4和參數(shù)5，參數(shù)6：結(jié)束圓的橫縱坐標(biāo)和半徑
? ? ? ?結(jié)果：
5.對(duì)畫布中圖形的操作
? ? 圖形的移動(dòng)，旋轉(zhuǎn)，縮放分別對(duì)應(yīng)方法：translate(),rotate(),scale(),
? ? translate(x,y):x表示圖形在橫坐標(biāo)上移動(dòng)距離，大于0向右移動(dòng)，小于0向左；
? ? ? ? ? ? ? ? ? ? ? ? ? y表示圖形在縱坐標(biāo)上移動(dòng)距離，大于0向上，小于0向左；
? ? ?rotate(angle):angle表示旋轉(zhuǎn)角度，大于0順時(shí)針，小于0逆時(shí)針;
? ? ?scale(x,y):x表示圖形在橫坐標(biāo)上縮放倍數(shù)，大于0放大，小于0縮小；
? ? ? ? ? ? ? ? ? ? y表示圖形在縱坐標(biāo)上縮放倍數(shù)，大于0放大，小于0縮??；
? ? ? 實(shí)例代碼：
? ? ?實(shí)例效果圖：
6.組合多個(gè)圖形
? ? 可以根據(jù)自己的要求將圖形交叉之后覆蓋或者顯示。通過修改上下文環(huán)境中的globalCompositeOperation屬性值來實(shí)現(xiàn)。source表示新圖形資源，destionation表示原圖形資源；
實(shí)例代碼：
結(jié)果：
7.添加圖形隱形
設(shè)置參數(shù)：
?直接上代碼：
? ?實(shí)例預(yù)覽圖：
8.處理畫布中的圖像
? ? 使用drawImage方法進(jìn)行繪制畫布中的圖像；
? （1）cxt.drawImage(image,dx,dy);
? ? ? ? ? image:表示頁面中的圖像；,dx,dy表示圖像左上角的橫縱坐標(biāo)
?（2）cxt.drawImage(image,dx,dy,dw,dh);
? ? ? ? ? image:表示頁面中的圖像；,dx,dy表示圖像左上角的橫縱坐標(biāo); ?dw,dh表示圖像縮放至畫布中的寬高；
? （3）cxt.drawImage(image，sx,sy,sw,sh,dx,dy,dw,dh);
? ? ? ? ? ? image,dx,dy, dw,dh使用如上；sx,sy,sw,sh表示需要剪裁的范圍；
實(shí)例代碼：
9.平鋪圖象
調(diào)用createPattern()方法關(guān)聯(lián)圖像。
實(shí)例代碼：
實(shí)例結(jié)果：
10.切割圖象
調(diào)用clip()方法切割畫布中繪制的圖像
實(shí)例代碼：
實(shí)例效果圖：
11.處理像素
可是實(shí)現(xiàn)對(duì)圖形進(jìn)行濾鏡效果，比較蒙版或者黑白。調(diào)用2個(gè)方法：1.getImageData()獲取像素；2.putImageData()用于將處理后的像素重新繪制到圖像中;
實(shí)例代碼：
以上代碼在谷歌中會(huì)出現(xiàn)如下問題：Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.
這是跨域的問題，在實(shí)際開發(fā)中圖片由服務(wù)器返回就不會(huì)報(bào)錯(cuò)。
12.畫布的其他應(yīng)用
12.1 ? 繪制文字
? ? ? ? 使用filleText()和StrokeText()進(jìn)行文字的繪制；
實(shí)例代碼：
結(jié)果頁面：
12.2 保存和恢復(fù)輸出圖形
? ? ? ?保存已繪制圖形：cxt.save();
? ? ? ?還原保存的圖形：cxt.restore();
? ? ? 保存的圖形輸出到瀏覽器:cxt.toDataURL(imgType);
? ? ?實(shí)例代碼：
實(shí)例結(jié)果：
操作說明:
點(diǎn)擊畫布第一次：出現(xiàn)第一個(gè)圖形點(diǎn)擊保存按鈕，將該圖形保存；
點(diǎn)擊畫布第二次：出現(xiàn)第二個(gè)圖形點(diǎn)擊恢復(fù)按鈕，將第一步保存的圖形恢復(fù)到棧中；
點(diǎn)擊畫布第三次：出現(xiàn)第三個(gè)圖形，頁面會(huì)從將第二步恢復(fù)的圖形填充到第三步繪制的圖形中
12.3 制作簡(jiǎn)單的動(dòng)畫
步驟1：自定義一個(gè)函數(shù)，用戶圖形的移動(dòng)或者旋轉(zhuǎn)
步驟2：使用setInterval()方法設(shè)置動(dòng)畫執(zhí)行的間隔時(shí)間，販毒執(zhí)行該動(dòng)畫
實(shí)例代碼：
效果圖：
