今天項(xiàng)目有個(gè)需求涎拉，發(fā)過來瞅了一眼，尼瑪哦，這尼瑪是畫的吧曼库，畫的吧Ｇ凇！；倏荨（圖1）
趕緊百度一波 慈缔，沒有。种玛。藐鹤。沒有。赂韵。娱节。沒有。祭示。苞冯。擦嘞? 要哭惹? ?涧团，百度h5的? 有個(gè)看起來很舒的??
https://blog.csdn.net/Welkin_qing/article/details/84592210
還好看的懂h5 但是差距還是很大? ? emmmmm? ?最終我放棄寫成一摸一樣了? ? ?結(jié)果 如： （圖二）
圖2代碼：
.js:
var context = wx.createCanvasContext('Canvas');
? ? var array = [3,10,10,7,5,5,8,6];
? ? var arraystr = ['職業(yè)發(fā)展', '財(cái)務(wù)狀況', '個(gè)人健康', '娛樂休閑', '家庭', '朋友和重要他人', '個(gè)人成長', '自我實(shí)現(xiàn)'];
? ? var colors = ["red", "blue", "yellow", "green", "purple", "black", "gold","forestgreen"];
? ? /*伸出去的線的長度*/
? ? var outLine = 30;
? ? /*說明的矩形大小*/
? ? var rectW = 30;
? ? var rectH = 16;
? ? var space = 20;
? ? var total = 0;
? ? for (var val = 0; val < array.length; val++) {
? ? ? total += array[val];
? ? }
? ? var point = { x: 250, y: 120 };
? ? var radius = [7 * 3, 7 * 10, 7 * 10, 7 * 7, 7 * 5, 7 * 5, 7 * 8, 7 *6];
? ? for (var i = 0; i < array.length; i++) {
? ? ? context.beginPath();
? ? ? var start = 0;
? ? ? if (i > 0) {
? ? ? ? for (var j = 0; j < i; j++) {
? ? ? ? ? start += array[j] / total * 2 * Math.PI;
? ? ? ? }
? ? ? }
? ? ? context.arc(point.x, point.y, radius[i], start, start + array[i] / total * 2 * Math.PI, false);
? ? ? context.setLineWidth(0)
? ? ? context.lineTo(point.x, point.y);
? ? ? context.setStrokeStyle('#F5F5F5');
? ? ? context.setFillStyle(colors[i]);
? ? ? context.fill();
? ? ? context.closePath();
? ? ? context.stroke();
? ? ? var edge = radius[i] + outLine;
? ? ? /*x軸方向的直角邊*/
? ? ? var edgeX = Math.cos(start + (array[i] / total * 2 * Math.PI)/2) * edge;
? ? ? /*y軸方向的直角邊*/
? ? ? var edgeY = Math.sin(start + (array[i] / total * 2 * Math.PI) / 2) * edge;
? ? ? var outX = point.x + edgeX;
? ? ? var outY = point.y + edgeY;
? ? ? context.beginPath();
? ? ? context.moveTo(point.x, point.y);
? ? ? context.lineTo(outX, outY);
? ? ? context.strokeStyle = colors[i];
? ? ? /*畫文字和下劃線*/
? ? ? /*線的方向怎么判斷 伸出去的點(diǎn)在X0的左邊 線的方向就是左邊*/
? ? ? /*線的方向怎么判斷 伸出去的點(diǎn)在X0的右邊 線的方向就是右邊*/
? ? ? /*結(jié)束的點(diǎn)坐標(biāo)? 和文字大小*/
? ? ? context.font = "14rpx Microsoft YaHei";
? ? ? const metrics = context.measureText(array[i]);
? ? ? var textWidth = metrics.width;
? ? ? if (outX > point.x) {
? ? ? ? /*右*/
? ? ? ? context.lineTo(outX + textWidth, outY);
? ? ? ? context.textAlign = 'left';
? ? ? } else {
? ? ? ? /*左*/
? ? ? ? context.lineTo(outX - textWidth, outY);
? ? ? ? context.textAlign = 'right';
? ? ? }
? ? ? context.stroke();
? ? ? context.textBaseline = 'bottom';
? ? ? context.fillText(array[i], outX, outY);
? ? ? /*繪制說明*/
? ? ? /*矩形的大小*/
? ? ? /*距離上和左邊的間距*/
? ? ? /*矩形之間的間距*/
? ? ? context.fillRect(space, space + i * (rectH + 10), rectW, rectH);
? ? ? /*繪制文字*/
? ? ? context.beginPath();
? ? ? context.textAlign = 'left';
? ? ? context.textBaseline = 'top';
? ? ? context.font = '12px Microsoft YaHei';
? ? ? context.fillText(arraystr[i], space + rectW + 10, space + i * (rectH + 10));
? ? }
? ? context.draw();
.wxml
<canvas canvas-id="Canvas" style="width: 400px; height: 400px;">
? ? ? ? </canvas>
最后花了兩個(gè)小時(shí)出來的樣子（圖3）
還有一個(gè)問題? 無法百分百還原掏缎，這個(gè)邊上的框內(nèi)文字怎么加箱蝠，加應(yīng)該是可以加的 但是目前時(shí)間不允許啊哈??
圖3代碼
.js
// var arraystr = ['職業(yè)發(fā)展', '財(cái)務(wù)狀況', '個(gè)人健康', '娛樂休閑', '家庭', '朋友和重要他人', '個(gè)人成長', '自我實(shí)現(xiàn)'];
? //? var colors = ["red", "blue", "yellow", "green", "purple", "black", "gold", "forestgreen"];
? //? var array1 = [.1, .1, .1, .1, .2, .2, .1, .1];
? //? /*伸出去的線的長度*/
? //? var outLine = 30;
? //? /*說明的矩形大小*/
? //? var rectW = 30;
? //? var rectH = 16;
? //? var space = 20;
? //? var array = [10, 10, 10, 10, 10, 10, 10, 10];
? //? var point = { x: 200, y: 150 };
? //? var radius = [100, 100, 100, 100, 100, 100, 100, 100];
? //? var context = wx.createCanvasContext('Canvas1');
? //? var total = 0;
? //? for (var val = 0; val < array.length; val++) {
? //? ? total += array[val];
? //? }
? //? for (var i = 0; i < array.length; i++) {
? //? ? context.beginPath();
? //? ? var start = 0;
? //? ? if (i > 0) {
? //? ? ? for (var j = 0; j < i; j++) {
? //? ? ? ? start += array[j] / total * 2 * Math.PI;
? //? ? ? }
? //? ? }
? //? ? context.arc(point.x, point.y, radius[i], start, start + array[i] / total * 2 * Math.PI, false);
? //? ? context.setLineWidth(1)
? //? ? context.lineTo(point.x, point.y);
? //? ? context.setStrokeStyle('#333333');
? //? ? context.setFillStyle('#fff');
? //? ? context.fill();
? //? ? context.closePath();
? //? ? context.stroke();
? //? }
? //? context.draw();
? //? var radius2 = [80, 80, 80, 80, 80, 80, 80, 80];
? //? var context2 = wx.createCanvasContext('Canvas2');
? //? var total = 0;
? //? for (var val = 0; val < array.length; val++) {
? //? ? total += array[val];
? //? }
? //? for (var i = 0; i < array.length; i++) {
? //? ? context2.beginPath();
? //? ? var start = 0;
? //? ? if (i > 0) {
? //? ? ? for (var j = 0; j < i; j++) {
? //? ? ? ? start += array[j] / total * 2 * Math.PI;
? //? ? ? }
? //? ? }
? //? ? context2.arc(point.x, point.y, radius2[i], start, start + array[i] / total * 2 * Math.PI, false);
? //? ? context2.setLineWidth(1)
? //? ? context2.lineTo(point.x, point.y);
? //? ? context2.setStrokeStyle('#333333');
? //? ? context2.setFillStyle('#fff');
? //? ? context2.fill();
? //? ? context2.closePath();
? //? ? context2.stroke();
? //? }
? //? context2.draw();
? //? var radius3 = [70, 50, 70, 80, 40, 60, 50, 30];
? //? var context3 = wx.createCanvasContext('Canvas3');
? //? var total = 0;
? //? for (var val = 0; val < array.length; val++) {
? //? ? total += array[val];
? //? }
? //? for (var i = 0; i < array.length; i++) {
? //? ? context3.beginPath();
? //? ? var start = 0;
? //? ? if (i > 0) {
? //? ? ? for (var j = 0; j < i; j++) {
? //? ? ? ? start += array[j] / total * 2 * Math.PI;
? //? ? ? }
? //? ? }
? //? ? context3.arc(point.x, point.y, radius3[i], start, start + array[i] / total * 2 * Math.PI, false);
? //? ? context3.setLineWidth(1)
? //? ? context3.lineTo(point.x, point.y);
? //? ? context3.setStrokeStyle('#333333');
? //? ? context3.setFillStyle(colors[i]);
? //? ? context3.fill();
? //? ? context3.closePath();
? //? ? context3.stroke();
? //? var edge = radius[i]+20 ;
? //? ? /*x軸方向的直角邊*/
? //? ? var edgeX = Math.cos(start + (array[i] / total * 2 * Math.PI)/2) * edge;
? //? ? /*y軸方向的直角邊*/
? //? ? var edgeY = Math.sin(start + (array[i] / total * 2 * Math.PI) / 2) * edge;
? //? ? var outX = point.x + edgeX;
? //? ? var outY = point.y + edgeY+10;
? //? ? context3.beginPath();
? //? ? // context3.moveTo(point.x, point.y);
? //? ? // context3.lineTo(outX, outY);
? //? ? // context3.strokeStyle = colors[i];
? //? ? /*畫文字和下劃線*/
? //? ? /*線的方向怎么判斷 伸出去的點(diǎn)在X0的左邊 線的方向就是左邊*/
? //? ? /*線的方向怎么判斷 伸出去的點(diǎn)在X0的右邊 線的方向就是右邊*/
? //? ? /*結(jié)束的點(diǎn)坐標(biāo)? 和文字大小*/
? //? ? context3.font = "14rpx Microsoft YaHei";
? //? ? const metrics = context3.measureText(radius3[i]);
? //? ? var textWidth = metrics.width;
? //? ? if (outX > point.x) {
? //? ? ? /*右*/
? //? ? ? context3.lineTo(outX + textWidth, outY);
? //? ? ? context3.textAlign = 'left';
? //? ? } else {
? //? ? ? /*左*/
? //? ? ? context3.lineTo(outX - textWidth, outY);
? //? ? ? context3.textAlign = 'right';
? //? ? }
? //? ? context3.stroke();
? //? ? context3.textBaseline = 'bottom';
? //? ? context3.fillText(radius3[i], outX, outY);
? //? ? // context3.fillRect(space, space + i * (rectH + 10), rectW, rectH);
? //? ? // /*繪制文字*/
? //? ? // context3.beginPath();
? //? ? // context3.textAlign = 'left';
? //? ? // context3.textBaseline = 'top';
? //? ? // context3.font = '12px Microsoft YaHei';
? //? ? // context3.fillText(arraystr[i], space + rectW + 10, space + i * (rectH + 10));
? //? }
? //? context3.draw();
.wxml
<!-- <canvas canvas-id="Canvas1" style="width: 400px; height: 400px;">
? ? ? ? ? <canvas canvas-id="Canvas2" style="width: 400px; height: 400px;">
? ? ? ? ? ? <canvas canvas-id="Canvas3" style="width: 400px; height: 400px;">
? ? ? ? ? ? </canvas>
? ? ? ? ? </canvas>
? ? ? ? </canvas> -->
在此作為記錄? 下次好用，有大佬有更好的方法? 希望能夠提出汇陆，萬謝Ｅā！毡代！
