淺談HTML5中的Canvas基本繪圖API簡易封裝和使用(一)
阿新 • • 發佈：2019-01-26
HTML5的Canvas的功能可謂是非常強大，它可以做出很多炫酷的效果，從而更好的增加使用者的體驗。今天我們就來一起看下HTML5一些常用的API,個人根據實際的使用把它再次進行一次封裝，使用起來感覺更方便，可能封裝的不全面，但是這個個人感覺後期可以自動新增，主要給自己複習使用，第一次發H5部落格，菜鳥一枚，初識H5.
MikyouCanvas.js(自己封裝的Canvas的Js庫)
測試的Canvas.jsvar mCanvas; //宣告Canvas物件; var cxt; //宣告context物件,該物件擁有豐富的繪圖的API function initMikyouCanvas(mCanvas, cxt) { this.mCanvas = mCanvas; this.cxt = cxt; } /** * 1、繪製矩形(主要分為:繪製填充矩形和繪製邊框矩形和清除矩形區域(利用isClear標記是否繪製清除矩形，實際上就是繪製一個與畫布背景色一致的矩形區域),利用isFill變數來標記) * 主要使用canvas原生的API:FillRect(x,y,width,height),StrokeRect(x,y,width,height),ClearRect(x,y,width,height) * 自己封裝的引數:drawRect(x,y,width,height,isClear,isFill,bgColor) * x:矩形起點的X座標(注意：相對座標系是以畫布的左上角為原點，向右為X座標正方向，向下為Y座標的正方向) * y:矩形終點的Y座標 * width:矩形的寬度 * height:矩形的高度 * isClear:是否繪製清除畫布的矩形區域，true則就是繪製一個清除畫布矩形區域，false就是繪製其他兩種矩形 * isFill:是否是填充，false為繪製邊框，true為繪製填充 * bgColor:矩形的顏色，若為填充則為整個矩形背景色，邊框則為邊框色 * */ function drawRect(x, y, width, height, isClear, isFill, bgColor) { if (isClear) { //為true表示繪製清除畫布的矩形區域,那麼傳入的isFill, bgColor值可以為任意值 cxt.clearRect(x, y, width, height); } else { //false if (isFill) { //為true，則繪製填充矩形 cxt.fillStyle = bgColor; cxt.fillRect(x, y, width, height); } else { //為false,則繪製邊框矩形 cxt.strokeStyle = bgColor; cxt.strokeRect(x, y, width, height); } } } /** * 2、繪製圓弧(主要分為：繪製填充圓弧和繪製圓弧邊框利用isFill變數來標記,注意：在繪製圓弧邊框的時候還有一種特殊情況就是，只需要僅僅繪製弧邊，不需要繪製圓弧開始起點和終點之間的連線，這個就是呼叫了beginPath()不需要呼叫closePath(),這裡也使用一個isOnlyArc變數來標記true為僅僅繪製弧邊 *其他的正常) * 主要是使用的是canvas原生的API: * arc(x,y,radius,startAngle,endAngle,anticlockwise); * x:圓心X座標 * y:圓心Y座標 * startAngle:開始的弧度 * endAngle:結束的弧度 * anticlockwise:true為逆時針，false為順時針 * 自己封裝的引數:drawCircle(x,y,radius,startAngle，endAngle,anticlockwise,isFill，bgColor) * x:圓心X座標 * y:圓心Y座標 * startAngle:開始的角度(通過getAngle方法將傳入的角度轉換成相應角度的弧度， * 因為在原生的繪製圓弧的API它是根據弧度大小來繪製的，例如如果你想繪製一個30度的圓弧，如果直接傳入30是不行的，要傳入Math.PI/6 * 所以在這裡個人做了一個優化，直接傳入30就通過getAngle方法轉換成Math.PI/6，這樣就很方便的繪製自己傳入的角度大小的圓弧。 * ) * endAngle:結束的角度 * 注意:如果要繪製圓形那麼只需要呼叫該方法，傳入的startAngle和endAngle是0度和360度即可。 * anticlockwise:true為逆時針，false為順時針 * isFill:是否是填充，false為繪製邊框，true為繪製填充 * bgColor:圓弧的顏色 * */ function drawArc(x, y, radius, startAngle, endAngle, anticlockwise, isOnlyArc, isFill, bgColor) { if (isFill) { //為true繪製填充圓弧 cxt.fillStyle = bgColor; cxt.beginPath(); cxt.arc(x, y, radius, getAngle(startAngle), getAngle(endAngle), anticlockwise); cxt.closePath(); cxt.fill(); } else { //為false繪製邊框圓弧 cxt.strokeStyle = bgColor; cxt.beginPath(); cxt.arc(x, y, radius, getAngle(startAngle), getAngle(endAngle), anticlockwise); if (isOnlyArc) { //繪製邊框的另一種情況就是僅僅繪製弧邊不需要呼叫closePath() } else { //否則就是不僅繪製邊框還得繪製起點和終點的連線，需要呼叫了closePath(); cxt.closePath(); } cxt.stroke(); } } /** * 3、繪製扇形(主要分為：繪製填充扇形和繪製扇形邊框利用isFill變數來標記） *主要是使用的是canvas原生的API: * arc(x,y,radius,startAngle,endAngle,anticlockwise); * x:圓心X座標 * y:圓心Y座標 * startAngle:開始的弧度 * endAngle:結束的弧度 * anticlockwise:true為逆時針，false為順時針 * 自己封裝引數API:drawSector(x,y,radius,startAngle,endAngle,anticlockwise,isFill,bgColor); * x:圓心X座標 * y:圓心Y座標 * startAngle:開始的角度(通過getAngle方法將傳入的角度轉換成相應角度的弧度， * 因為在原生的繪製圓弧的API它是根據弧度大小來繪製的，例如如果你想繪製一個30度的圓弧，如果直接傳入30是不行的，要傳入Math.PI/6 * 所以在這裡個人做了一個優化，直接傳入30就通過getAngle方法轉換成Math.PI/6，這樣就很方便的繪製自己傳入的角度大小的圓弧。 * ) * endAngle:結束的角度 * anticlockwise:true為逆時針，false為順時針 * isFill:是否是填充，false為繪製邊框，true為繪製填充 * bgColor:扇形的顏色 * */ function drawSector(x, y, radius, startAngle, endAngle, anticlockwise, isFill, bgColor) { if (isFill) { cxt.fillStyle = bgColor; cxt.beginPath(); cxt.moveTo(x, y); //把路徑移動到畫布中的指定點，不建立線條，注意：繪製扇形唯一與繪製弧的區別在於，緊跟著beginPath()後面呼叫，首先將路徑移動到圓心位置 cxt.arc(x, y, radius, getAngle(startAngle), getAngle(endAngle), false); cxt.closePath(); cxt.fill(); } else { cxt.strokeStyle = bgColor; cxt.beginPath(); cxt.moveTo(x, y); cxt.arc(x, y, radius, getAngle(startAngle), getAngle(endAngle), false); cxt.closePath(); cxt.stroke(); } } /** * @description 4、繪製線段(主要分為：繪製填充線段和繪製空心線段利用isFill變數來標記） * 主要是使用的是canvas原生的API: * lineTo(x,y):表示從某點連線到該座標點 *moveTo(x,y):表示將路徑移動到畫布中的該座標點 * x:畫布中某點的X座標 * y:畫布中某點的Y座標 * 注意：如果開始沒有呼叫moveTo,那麼第一個lineTo的功能就相當於一個moveTo * 自己封裝的API:drawLine(startX,startY,endX,endY,lineWidth,bgcolor) * * startX:表示線的起點的X座標 * startY:表示起點的Y座標 * endX:表示線的終點的X座標 * endY:表示線的終點的Y座標 * lineWidth:表示線段的寬度 * bgColor:線的顏色 * */ function drawLine(startX, startY, endX, endY, lineWidth, bgColor) { cxt.beginPath(); cxt.lineWidth = lineWidth; cxt.fillStyle = bgColor;//經過測試不管是fillStyle還是StrokeStyle都是一樣的 cxt.moveTo(startX, startY); cxt.lineTo(endX, endY); cxt.closePath(); cxt.fill(); } /** * @description 5、繪製貝塞爾曲線 * drawBezierCurve * */ //將角度轉換成弧度函式， function getAngle(arc) { return Math.PI * (arc / 180); }
var mCanvas; //宣告Canvas物件; var cxt; //宣告context物件,該物件擁有豐富的繪圖的API function initCanvas() { //onload事件載入該方法，當HTML5頁面載入的時候就會回撥該方法 mCanvas = document.getElementById("canvas"); //初始化canvas物件,這裡只是獲得了Canvas的這個整個的標籤---<canvas id="mCanvas" width="800" height="800"></canvas> cxt = mCanvas.getContext("2d"); //初始化cxt物件,然後就去獲得canvas的上下文物件cxt,注意傳入引數為2d表示繪製2d平面，cxt得到的是一個canvasRenderingContext2D物件，裡面封裝了大量的canvas繪圖API //初始化Canvas initMikyouCanvas(mCanvas,cxt); /**canvas各種繪圖的API**/ //1、繪製矩形，drawRect(x,y,width,height,isClear,isFill,bgColor); drawRect(100, 100, 200, 200, false, false, "rgba(0,0,255,0.8)"); //2、繪製圓弧,drawArc(x,y,radius,startAngle,endAngle,anticlockwise,isOnlyArc,isFill); drawArc(200, 200, 100, 0, 190, false, true, false, "rgba(255,0,255,0.6)"); //3、繪製圓形 drawArc(420,200,100,0,360,false,false,true,"rgba(255,0,0,0.5)"); //4、繪製扇形。drawSector(x, y, radius, startAngle, endAngle, anticlockwise, isFill, bgColor) drawSector(350, 350, 100, 0, 120, false, true, "rgba(255,0,0,0.5)"); //5、繪製線段 drawLine(startX, startY, endX, endY, lineWidth,bgColor) drawLine(300,300,400,400,1,"rgba(255,0,0,0.5)"); drawLine(310,350,450,450,1,"rgba(0,0,255,0.5)"); }
測試的Html5的Html
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="js/MikyouCanvas.js" type="text/javascript" charset="utf-8"></script> <script src="js/canvas.js" type="text/javascript" charset="utf-8"></script> </head> <body onload="initCanvas()" style="text-align: center;"> <canvas id="canvas" width="600px" height="600px" style="background: #EEEEFF;"></canvas> </body> </html>
測試結果:
