html

<div class="title">墨言戰力圖</div>
		<canvas id="myCanvas" width="400" height="400" style="border:0px solid #c3c3c3;">

js

	var c = document.getElementById('myCanvas');
			var ctx = c.getContext('2d');

			var mCount = 6; //邊數
			var mCenter = 400 / 2;
			var mRadius = mCenter - 50; //半徑(減去的值用於給繪製的文字留空間)
			var mAngle = Math.PI * 2 / mCount;
			var mColorPolygon = '#B8B8B8'; //多邊形顏色

			drawPolygon(ctx);

			function drawPolygon(ctx) {
				ctx.save();

				ctx.strokeStyle = mColorPolygon;
				var r = mRadius / mCount;
				//畫6個圈
				for(var i = 0; i < mCount; i++) {
					ctx.beginPath();
					var currR = r * (i + 1); //當前半徑
					//畫6條邊
					for(var j = 0; j < mCount; j++) {
						var x = mCenter + currR * Math.cos(mAngle * j);
						var y = mCenter + currR * Math.sin(mAngle * j);

						ctx.lineTo(x, y);
					}
					ctx.closePath()
					ctx.stroke();
				}

				ctx.restore();
			}

			var mColorLines = '#B8B8B8'; //頂點連線顏色

			drawLines(ctx);

			//頂點連線
			function drawLines(ctx) {
				ctx.save();

				ctx.beginPath();
				ctx.strokeStyle = mColorLines;

				for(var i = 0; i < mCount; i++) {
					var x = mCenter + mRadius * Math.cos(mAngle * i);
					var y = mCenter + mRadius * Math.sin(mAngle * i);

					ctx.moveTo(mCenter, mCenter);
					ctx.lineTo(x, y);
				}

				ctx.stroke();

				ctx.restore();
			}

			var mmColorLines = '#B9999';
			drawNeiLines(ctx);
			//畫點
			function drawNeiLines(ctx) {
				ctx.save();

				ctx.beginPath();
				ctx.strokeStyle = mmColorLines;

				for(var i = 0; i < mCount; i++) {
					var x = mCenter + mRadius * Math.cos(mAngle * i);
					var y = mCenter + mRadius * Math.sin(mAngle * i);

					if(mAngle * i >= 0 && mAngle * i <= Math.PI / 4) {
						ctx.beginPath(); // 開啟繪製路徑
						ctx.arc(x - 24, y, 5, 0, 2 * Math.PI); // 繪製圓 引數依次為 圓的橫座標/縱座標/半徑/繪製圓的起始位置/繪製圓的弧度大小
						ctx.fillStyle = "#B9999"; // 設定填充顏色
						ctx.fill(); // 填充顏色
						ctx.moveTo(326, 200); // 設定線的起始位置
						ctx.lineTo(249, 284); // 設定線的結束位置
						ctx.strokeStyle = 'blue'; // 設定繪製線條的顏色
						ctx.strokeWidth = 1; // 設定繪製線條的寬度
						ctx.stroke(); // 繪製
						ctx.moveTo(326, 200); // 設定線的起始位置
						ctx.lineTo(274, 70); // 設定線的結束位置
						ctx.strokeStyle = 'blue'; // 設定繪製線條的顏色
						ctx.strokeWidth = 1; // 設定繪製線條的寬度
						ctx.stroke(); // 繪製
						ctx.moveTo(274, 70); // 設定線的起始位置
						ctx.lineTo(163, 138); // 設定線的結束位置
						ctx.strokeStyle = 'blue'; // 設定繪製線條的顏色
						ctx.strokeWidth = 1; // 設定繪製線條的寬度
						ctx.stroke(); // 繪製
						ctx.moveTo(163, 138); // 設定線的起始位置
						ctx.lineTo(78, 200); // 設定線的結束位置
						ctx.strokeStyle = 'blue'; // 設定繪製線條的顏色
						ctx.strokeWidth = 1; // 設定繪製線條的寬度
						ctx.stroke(); // 繪製
						ctx.moveTo(78, 200); // 設定線的起始位置
						ctx.lineTo(165, 265); // 設定線的結束位置
						ctx.strokeStyle = 'blue'; // 設定繪製線條的顏色
						ctx.strokeWidth = 1; // 設定繪製線條的寬度
						ctx.stroke(); // 繪製
						ctx.moveTo(165, 265); // 設定線的起始位置
						ctx.lineTo(249, 284); // 設定線的結束位置
						ctx.strokeStyle = 'blue'; // 設定繪製線條的顏色
						ctx.strokeWidth = 1; // 設定繪製線條的寬度
						ctx.stroke(); // 繪製
						ctx.fillStyle = "red"; // 設定填充顏色
						ctx.fill(); // 填充顏色
						ctx.closePath(); // 關閉繪製路徑
//						console.log("速度:" + y);
					} else if(mAngle * i > Math.PI / 1.5 && mAngle * i <= Math.PI) {
						ctx.beginPath(); // 開啟繪製路徑
						ctx.arc(x + 28, y, 5, 0, 2 * Math.PI); // 繪製圓 引數依次為 圓的橫座標/縱座標/半徑/繪製圓的起始位置/繪製圓的弧度大小
						ctx.fillStyle = "#B9999"; // 設定填充顏色
						ctx.fill(); // 填充顏色
						ctx.closePath(); // 關閉繪製路徑
//						console.log("射門:" + y);
					} else if(mAngle * i > Math.PI && mAngle * i <= Math.PI * 3 / 2) {
						ctx.beginPath(); // 開啟繪製路徑
						ctx.arc(x + 38, y + 68, 5, 0, 2 * Math.PI); // 繪製圓 引數依次為 圓的橫座標/縱座標/半徑/繪製圓的起始位置/繪製圓的弧度大小
						ctx.fillStyle = "#B9999"; // 設定填充顏色
						ctx.fill(); // 填充顏色
						ctx.closePath(); // 關閉繪製路徑
//						console.log("傳球:"+y); 
					} else if(mAngle * i >= 0 && mAngle * i <= Math.PI / 2) {
						ctx.beginPath(); // 開啟繪製路徑
						ctx.arc(x - 26, y - 46, 5, 0, 2 * Math.PI); // 繪製圓 引數依次為 圓的橫座標/縱座標/半徑/繪製圓的起始位置/繪製圓的弧度大小
						ctx.fillStyle = "#B9999"; // 設定填充顏色
						ctx.fill(); // 填充顏色
						ctx.closePath(); // 關閉繪製路徑
//						console.log("力量:"+(y-46)); 
					} else if(mAngle * i > Math.PI / 1.5) {
						ctx.beginPath(); // 開啟繪製路徑
						ctx.arc(x, y, 5, 0, 2 * Math.PI); // 繪製圓 引數依次為 圓的橫座標/縱座標/半徑/繪製圓的起始位置/繪製圓的弧度大小
						ctx.fillStyle = "#B9999"; // 設定填充顏色
						ctx.fill(); // 填充顏色
						ctx.closePath(); // 關閉繪製路徑
//						console.log("耐力:"+y); 
					} else {
						ctx.beginPath(); // 開啟繪製路徑
						ctx.arc(x + 40, y - 64, 5, 0, 2 * Math.PI); // 繪製圓 引數依次為 圓的橫座標/縱座標/半徑/繪製圓的起始位置/繪製圓的弧度大小
						ctx.fillStyle = "#B9999"; // 設定填充顏色
						ctx.fill(); // 填充顏色
						ctx.closePath(); // 關閉繪製路徑
//						console.log("防守:"+y); 
					}
				}

				ctx.restore();
			}

			var mData = [
				['顏值', 77],
				['人緣', 72],
				['魅力', 46],
				['身材', 50],
				['丁丁', 80],
				['腿長', 60]
			]; //資料
			var mColorText = '#000000';

			drawText(ctx);
			//繪製文字
			function drawText(ctx) {
				ctx.save();

				var fontSize = mCenter / 12;
				ctx.font = fontSize + 'px Microsoft Yahei';
				ctx.fillStyle = mColorText;

				for(var i = 0; i < mCount; i++) {
					var x = mCenter + mRadius * Math.cos(mAngle * i);
					var y = mCenter + mRadius * Math.sin(mAngle * i);

					//通過不同的位置，調整文字的顯示位置
					if(mAngle * i >= 0 && mAngle * i <= Math.PI / 2) {
						ctx.fillText(mData[i][0], x, y + fontSize);
					} else if(mAngle * i > Math.PI / 2 && mAngle * i <= Math.PI) {
						ctx.fillText(mData[i][0], x - ctx.measureText(mData[i][0]).width, y + fontSize);
					} else if(mAngle * i > Math.PI && mAngle * i <= Math.PI * 3 / 2) {
						ctx.fillText(mData[i][0], x - ctx.measureText(mData[i][0]).width, y);
					} else {
						ctx.fillText(mData[i][0], x, y);
					}

				}

				ctx.restore();
			}
 

效果圖