canvas雷达图

以你之姓@ 2021-09-16 11:50 513阅读 0赞

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();
    			}

效果图

![70][]

[70]: /images/20210724/1e8f45520b034f9d9734dba4786fbe27.png

发表评论取消回复

表情：

评论列表（有 0 条评论，513人围观）

还没有评论，来说两句吧...

相关阅读

相关 Canvas雷达显示图，动态扫描

做卫星项目的时候，会涉及到雷达图，用于扫描卫星，给人形象化的感觉。以下代码为canvas实现的demo，请运行查看. 效果图 ![在这里插入图片描述][21e13da2

绝地灬酷狼/ 2024年02月20日 12:32/ 0 赞/ 82 阅读

相关 Tableau的雷达图和凹凸图

文章目录 1、雷达图 1.1 数据表处理 1.2 创建计算字段 1.3 调整雷达图视图 2、凹凸图 2.1 超市各年份利润的凹凸图 ---------------

怼烎@/ 2023年01月02日 10:25/ 0 赞/ 234 阅读

相关 Echarts：10-7-5:雷达图+多雷达图

1-基础雷达图 option = { title: { text: '雷达图' }, tool

深碍√TFBOYSˉ_/ 2022年12月12日 13:54/ 0 赞/ 281 阅读

相关 Tableau的雷达图和凹凸图

文章目录 1、雷达图 1.1 数据表处理 1.2 创建计算字段 1.3 调整雷达图视图 2、凹凸图 2.1 超市各年份利润的凹凸图 ---------------

墨蓝/ 2022年11月19日 15:58/ 0 赞/ 236 阅读

相关雷达图

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <

梦里梦外;/ 2022年05月28日 01:21/ 0 赞/ 327 阅读

相关 Echarts 制作雷达图

一.代码: 1.数据接口 @RequestMapping(value="/SnsBL") public void SnsBL(HttpServletRes

偏执的太偏执、/ 2022年05月26日 10:08/ 0 赞/ 321 阅读

相关 Qt绘制雷达图（效果图）

效果图如下： ![在这里插入图片描述][20190227171837116.gif] 原理：自定义控件，并使用QPainter等绘制。雷达图主要包括的

心已赠人/ 2022年03月16日 11:16/ 2 赞/ 970 阅读

相关 echarts 雷达图

var evalateStaTableOption = { title: { // text: '基础雷达图'

浅浅的花香味﹌/ 2022年01月06日 00:45/ 0 赞/ 418 阅读

相关 canvas雷达图

html <div class="title">墨言战力图</div> <canvas id="myCanvas" width="400" height=

以你之姓@/ 2021年09月16日 11:50/ 0 赞/ 514 阅读

相关 echarts 雷达图

1、配置数据 (1)配置各个边角极限值 var dataMax=[{name:'名称',max:最大值}] (2)配置展示

骑猪看日落/ 2021年07月24日 19:32/ 0 赞/ 880 阅读