繪制圓弧 · 前端速查手冊

>[success] # 繪制圓弧 ![](https://box.kancloud.cn/55f03ffe0f25f78101e070c1243c6ccf_468x406.png) ~~~ 1.圓360° 也就是2π 弧度長 2.從右面為起點順時針轉動結尾是2π 3.繪制一個弧需要確定圓心坐標 --- x y 確定圓半徑 --- r 確定起始繪制的位置和結束繪制的位置確定弧的長度和位置 startAngle endAngle 弧度取得繪制的方向 direction 默認是順時針 false 逆時針 true ~~~ >[danger] ##### 繪制一個弧 ~~~ 1.半徑長度為150，逆時針的圓 ~~~ ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> canvas { border: 1px solid #ccc; } </style> </head> <body> <canvas width="600" height="400"></canvas> <script> var myCanvas = document.querySelector('canvas'); var ctx = myCanvas.getContext('2d'); /*繪制圓弧*/ /*確定圓心坐標 x y*/ /*確定圓半徑 r */ /*確定起始繪制的位置和結束繪制的位置確定弧的長度和位置 startAngle endAngle 弧度*/ /*取得繪制的方向 direction 默認是順時針 false 逆時針 true */ /*在中心位置畫一個半徑150px的圓弧左下角*/ var w = ctx.canvas.width; var h = ctx.canvas.height; ctx.arc(w/2,h/2,150,Math.PI/2,Math.PI,true); ctx.stroke(); </script> </body> </html> ~~~ >[danger] ##### 繪制一個圓弧 ~~~ 1.為了能讓圓弧閉合 ctx.moveTo(w/2,h/2); 從圓心位置開始 ~~~ ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> canvas { border: 1px solid #ccc; } </style> </head> <body> <canvas width="600" height="400"></canvas> <script> var myCanvas = document.querySelector('canvas'); var ctx = myCanvas.getContext('2d'); /*在中心位置畫一個半徑150px的圓弧右上角扇形邊填充 */ var w = ctx.canvas.width; var h = ctx.canvas.height; /*把起點放到圓心位置*/ ctx.moveTo(w/2,h/2); ctx.arc(w/2,h/2,150,0,-Math.PI/2,true); /*閉合路徑*/ //ctx.closePath(); ctx.fill(); </script> </body> </html> ~~~ >[success] # 圓弧分割6等分 ~~~ 1. 要畫多個扇形弧度定義個數定義可以分成多少個弧度 2. 畫弧度通過循環實現，開始的邊等i* 平均的弧度，結束i* 平均弧度+1 ~~~ >[danger] ##### 代碼 ![](https://box.kancloud.cn/876489d6da0fe974234f9c1da5bab4a0_542x377.png) ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> canvas { border: 1px solid #ccc; } </style> </head> <body> <canvas width="600" height="400"></canvas> <script> var myCanvas = document.querySelector('canvas'); var ctx = myCanvas.getContext('2d'); var w = ctx.canvas.width; var h = ctx.canvas.height; /*分成幾等分*/ var num = 6; /*一份多少弧度*/ var angle = Math.PI * 2 / num; /*原點坐標*/ var x0 = w / 2; var y0 = h / 2; /*獲取隨機顏色*/ var getRandomColor = function () { var r = Math.floor(Math.random() * 256); var g = Math.floor(Math.random() * 256); var b = Math.floor(Math.random() * 256); return 'rgb(' + r + ',' + g + ',' + b + ')'; } /*上一次繪制的結束弧度等于當前次的起始弧度*/ //var startAngle = 0; for (var i = 0; i < num; i++) { var startAngle = i * angle; var endAngle = (i + 1) * angle; ctx.beginPath(); ctx.moveTo(x0, y0); ctx.arc(x0, y0, 150, startAngle, endAngle); /*隨機顏色*/ ctx.fillStyle = getRandomColor(); ctx.fill(); } </script> </body> </html> ~~~ >[success] # 計算年齡占比 ![](https://box.kancloud.cn/10af48c3dcad195608efcfdc35cbb712_475x386.png) ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> canvas { border: 1px solid #ccc; } </style> </head> <body> <canvas width="600" height="400"></canvas> <script> var myCanvas = document.querySelector('canvas'); var ctx = myCanvas.getContext('2d'); /*1.繪制年齡占比*/ /*2.準備統計的數據*/ /*15-20歲 6個*/ /*20-25歲 30個*/ /*25-30歲 10個*/ /*30-35歲 8個*/ var data = [6, 30, 10, 8]; /*3.在餅圖表示出來*/ /*4.需要把數據轉出弧度*/ var angleList = []; var total = 0; // 求出總共多少 data.forEach(function (item, i) { total += item; }); console.log(total); /*第二是轉換成弧度的時候就可以去繪制扇形減少一次遍歷*/ data.forEach(function (item, i) { // 算出弧度大小 var angle = Math.PI * 2 * (item/total); angleList.push(angle); }); console.log(angleList); /*5.根據弧度繪制扇形*/ var w = ctx.canvas.width; var h = ctx.canvas.height; var x0 = w/2; var y0 = h/2; /*獲取隨機顏色*/ var getRandomColor = function () { var r = Math.floor(Math.random() * 256); var g = Math.floor(Math.random() * 256); var b = Math.floor(Math.random() * 256); return 'rgb(' + r + ',' + g + ',' + b + ')'; } var startAngle = 0; angleList.forEach(function (item,i) { /*上一次繪制的結束弧度等于當前次的起始弧度*/ var endAngle = startAngle + item; ctx.beginPath(); ctx.moveTo(x0,y0); ctx.arc(x0,y0,150,startAngle,endAngle); ctx.fillStyle = getRandomColor(); ctx.fill(); /*記錄當前的結束位置作為下一次的起始位置*/ startAngle = endAngle; }); </script> </body> </html> ~~~ >[success] # 做一個完整餅狀圖 ![](https://box.kancloud.cn/2d12280f9e79cd35ca176327bd62141a_679x419.png) ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> canvas { border: 1px solid #ccc; display: block; margin: 100px auto; } </style> </head> <body> <canvas width="600" height="400"></canvas> <script> /*var myCanvas = document.querySelector('canvas'); var ctx = myCanvas.getContext('2d');*/ /*1.繪制餅狀態圖*/ /*1.1 根據數據繪制一個餅圖*/ /*1.2 繪制標題從扇形的弧中心伸出一條線在畫一條橫線在橫線的上面寫上文字標題*/ /*1.3 在畫布的左上角繪制說明一個和扇形一樣顏色的矩形旁邊就是文字說明*/ var PieChart = function (ctx) { /*繪制工具*/ this.ctx = ctx || document.querySelector('canvas').getContext('2d'); /*繪制餅圖的中心*/ this.w = this.ctx.canvas.width; this.h = this.ctx.canvas.height; /*圓心*/ this.x0 = this.w / 2 + 60; this.y0 = this.h / 2; /*半徑*/ this.radius = 150; /*伸出去的線的長度*/ this.outLine = 20; /*說明的矩形大小*/ this.rectW = 30; this.rectH = 16; this.space = 20; } PieChart.prototype.init = function (data) { /*1.準備數據*/ this.drawPie(data); }; PieChart.prototype.drawPie = function (data) { var that = this; /*1.轉化弧度*/ var angleList = this.transformAngle(data); /*2.繪制餅圖*/ var startAngle = 0; angleList.forEach(function (item, i) { /*當前的結束弧度要等于下一次的起始弧度*/ var endAngle = startAngle + item.angle; that.ctx.beginPath(); that.ctx.moveTo(that.x0, that.y0); that.ctx.arc(that.x0, that.y0, that.radius, startAngle, endAngle); var color = that.ctx.fillStyle = that.getRandomColor(); that.ctx.fill(); /*下一次要使用當前的這一次的結束角度*/ /*繪制標題*/ that.drawTitle(startAngle, item.angle, color , item.title); /*繪制說明*/ that.drawDesc(i,item.title); startAngle = endAngle; }); }; PieChart.prototype.drawTitle = function (startAngle, angle ,color , title) { /*1.確定伸出去的線通過圓心點通過伸出去的點確定這個線*/ /*2.確定伸出去的點需要確定伸出去的線的長度*/ /*3.固定伸出去的線的長度*/ /*4.計算這個點的坐標*/ /*5.需要根據角度和斜邊的長度*/ /*5.1 使用弧度當前扇形的起始弧度 + 對應的弧度的一半 */ /*5.2 半徑+伸出去的長度 */ /*5.3 outX = x0 + cos(angle) * ( r + outLine)*/ /*5.3 outY = y0 + sin(angle) * ( r + outLine)*/ /*斜邊*/ var edge = this.radius + this.outLine; /*x軸方向的直角邊*/ var edgeX = Math.cos(startAngle + angle / 2) * edge; /*y軸方向的直角邊*/ var edgeY = Math.sin(startAngle + angle / 2) * edge; /*計算出去的點坐標*/ var outX = this.x0 + edgeX; var outY = this.y0 + edgeY; this.ctx.beginPath(); this.ctx.moveTo(this.x0, this.y0); this.ctx.lineTo(outX, outY); this.ctx.strokeStyle = color; /*畫文字和下劃線*/ /*線的方向怎么判斷伸出去的點在X0的左邊線的方向就是左邊*/ /*線的方向怎么判斷伸出去的點在X0的右邊線的方向就是右邊*/ /*結束的點坐標和文字大小*/ this.ctx.font = '14px Microsoft YaHei'; var textWidth = this.ctx.measureText(title).width ; if(outX > this.x0){ /*右*/ this.ctx.lineTo(outX + textWidth,outY); this.ctx.textAlign = 'left'; }else{ /*左*/ this.ctx.lineTo(outX - textWidth,outY); this.ctx.textAlign = 'right'; } this.ctx.stroke(); this.ctx.textBaseline = 'bottom'; this.ctx.fillText(title,outX,outY); }; PieChart.prototype.drawDesc = function (index,title) { /*繪制說明*/ /*矩形的大小*/ /*距離上和左邊的間距*/ /*矩形之間的間距*/ this.ctx.fillRect(this.space,this.space + index * (this.rectH + 10),this.rectW,this.rectH); /*繪制文字*/ this.ctx.beginPath(); this.ctx.textAlign = 'left'; this.ctx.textBaseline = 'top'; this.ctx.font = '12px Microsoft YaHei'; this.ctx.fillText(title,this.space + this.rectW + 10 , this.space + index * (this.rectH + 10)); }; PieChart.prototype.transformAngle = function (data) { /*返回的數據內容包含弧度的*/ var total = 0; data.forEach(function (item, i) { total += item.num; }); /*計算弧度并且追加到當前的對象內容*/ data.forEach(function (item, i) { var angle = item.num / total * Math.PI * 2; item.angle = angle; }); return data; }; PieChart.prototype.getRandomColor = function () { var r = Math.floor(Math.random() * 256); var g = Math.floor(Math.random() * 256); var b = Math.floor(Math.random() * 256); return 'rgb(' + r + ',' + g + ',' + b + ')'; }; var data = [ { title: '15-20歲', num: 6 }, { title: '20-25歲', num: 30 }, { title: '25-30歲', num: 10 }, { title: '30以上', num: 8 } ]; var pieChart = new PieChart(); pieChart.init(data); </script> </body> </html> ~~~