html5
html5教程-HTML5Canvas制作雷达图实战
发布时间：2018-12-10 发布网站：脚本宝典
脚本宝典收集整理的这篇文章主要介绍了html5教程-HTML5Canvas制作雷达图实战，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
HTML5Canvas制作雷达图实战。雷达图又叫蜘蛛网图，是一种对各项数据查看很明显的表现图，在很多游戏中，对游戏中的每个角色的分析图一般也用这种图。
下面，用HTML5的Cavas来实现雷达图。
效果
一、创建Canvas
var mW = 400; var mH = 400; var mCtx = null; var canvas = document.createElement('canvas'); document.body.appendChild(canvas); canvas.height = mH; canvas.width = mW; mCtx = canvas.getContext('2d'); 二、制作多边形背景
var mCount = 6; //边数 var mCenter = mW /2; //中心点 var mRadius = mCenter - 50; //半径(减去的值用于给绘制的文本留空间) var mAngle = Math.PI * 2 / mCount; //角度 var mColorPolygon = '#B8B8B8'; //多边形颜色 // 绘制多边形边 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'; //顶点连线颜色 //顶点连线 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 mData = [['速度', 77], ['力量', 72], ['防守', 46], ['射门', 50], ['传球', 80], ['耐力', 60]]; //数据 var mColorText = '#000000'; //绘制文本 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(); } 效果：
五、绘制数据覆盖区域
//绘制数据区域 function drawRegion(ctx){ ctx.save(); ctx.beginPath(); for(var i = 0; i < mCount; i ++){ var x = mCenter + mRadius * Math.cos(mAngle * i) * mData[i][1] / 100; var y = mCenter + mRadius * Math.sin(mAngle * i) * mData[i][1] / 100; ctx.lineTo(x, y); } ctx.closePath(); ctx.fillStyle = 'rgba(255, 0, 0, 0.5)'; ctx.fill(); ctx.restore(); } 效果：
六、绘制数据点
把每个数据与线的焦点绘制出来。
//画点 function drawCircle(ctx){ ctx.save(); var r = mCenter / 18; for(var i = 0; i < mCount; i ++){ var x = mCenter + mRadius * Math.cos(mAngle * i) * mData[i][1] / 100; var y = mCenter + mRadius * Math.sin(mAngle * i) * mData[i][1] / 100; ctx.beginPath(); ctx.arc(x, y, r, 0, Math.PI * 2); ctx.fillStyle = 'rgba(255, 0, 0, 0.8)'; ctx.fill(); } ctx.restore(); } 效果：
效果演示
最终代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> canvas{ } </style> </head> <body> <script type="text/javascript"> var mW = 400; var mH = 400; var mData = [['速度', 77], ['力量', 72], ['防守', 46], ['射门', 50], ['传球', 80], ['耐力', 60]]; var mCount = mData.length; //边数 var mCenter = mW /2; //中心点 var mRadius = mCenter - 50; //半径(减去的值用于给绘制的文本留空间) var mAngle = Math.PI * 2 / mCount; //角度 var mCtx = null; var mColorPolygon = '#B8B8B8'; //多边形颜色 var mColorLines = '#B8B8B8'; //顶点连线颜色 var mColorText = '#000000'; //初始化 (function(){ var canvas = document.createElement('canvas'); document.body.appendChild(canvas); canvas.height = mH; canvas.width = mW; mCtx = canvas.getContext('2d'); drawPolygon(mCtx); drawLines(mCtx); drawText(mCtx); drawRegion(mCtx); drawCircle(mCtx); })(); // 绘制多边形边 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(); } //顶点连线 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(); } //绘制文本 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(); } //绘制数据区域 function drawRegion(ctx){ ctx.save(); ctx.beginPath(); for(var i = 0; i < mCount; i ++){ var x = mCenter + mRadius * Math.cos(mAngle * i) * mData[i][1] / 100; var y = mCenter + mRadius * Math.sin(mAngle * i) * mData[i][1] / 100; ctx.lineTo(x, y); } ctx.closePath(); ctx.fillStyle = 'rgba(255, 0, 0, 0.5)'; ctx.fill(); ctx.restore(); } //画点 function drawCircle(ctx){ ctx.save(); var r = mCenter / 18; for(var i = 0; i < mCount; i ++){ var x = mCenter + mRadius * Math.cos(mAngle * i) * mData[i][1] / 100; var y = mCenter + mRadius * Math.sin(mAngle * i) * mData[i][1] / 100; ctx.beginPath(); ctx.arc(x, y, r, 0, Math.PI * 2); ctx.fillStyle = 'rgba(255, 0, 0, 0.8)'; ctx.fill(); } ctx.restore(); } </script> </body> </html>
HTML5Canvas制作雷达图实战。雷达图又叫蜘蛛网图，是一种对各项数据查看很明显的表现图，在很多游戏中，对游戏中的每个角色的分析图一般也用这种图。
下面，用HTML5的Cavas来实现雷达图。
效果
一、创建Canvas
var mW = 400; var mH = 400; var mCtx = null; var canvas = document.createElement('canvas'); document.body.appendChild(canvas); canvas.height = mH; canvas.width = mW; mCtx = canvas.getContext('2d'); 二、制作多边形背景
var mCount = 6; //边数 var mCenter = mW /2; //中心点 var mRadius = mCenter - 50; //半径(减去的值用于给绘制的文本留空间) var mAngle = Math.PI * 2 / mCount; //角度 var mColorPolygon = '#B8B8B8'; //多边形颜色 // 绘制多边形边 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'; //顶点连线颜色 //顶点连线 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 mData = [['速度', 77], ['力量', 72], ['防守', 46], ['射门', 50], ['传球', 80], ['耐力', 60]]; //数据 var mColorText = '#000000'; //绘制文本 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(); } 效果：
五、绘制数据覆盖区域
//绘制数据区域 function drawRegion(ctx){ ctx.save(); ctx.beginPath(); for(var i = 0; i < mCount; i ++){ var x = mCenter + mRadius * Math.cos(mAngle * i) * mData[i][1] / 100; var y = mCenter + mRadius * Math.sin(mAngle * i) * mData[i][1] / 100; ctx.lineTo(x, y); } ctx.closePath(); ctx.fillStyle = 'rgba(255, 0, 0, 0.5)'; ctx.fill(); ctx.restore(); } 效果：
六、绘制数据点
把每个数据与线的焦点绘制出来。
//画点 function drawCircle(ctx){ ctx.save(); var r = mCenter / 18; for(var i = 0; i < mCount; i ++){ var x = mCenter + mRadius * Math.cos(mAngle * i) * mData[i][1] / 100; var y = mCenter + mRadius * Math.sin(mAngle * i) * mData[i][1] / 100; ctx.beginPath(); ctx.arc(x, y, r, 0, Math.PI * 2); ctx.fillStyle = 'rgba(255, 0, 0, 0.8)'; ctx.fill(); } ctx.restore(); } 效果：
效果演示
最终代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> canvas{ } </style> </head> <body> <script type="text/javascript"> var mW = 400; var mH = 400; var mData = [['速度', 77], ['力量', 72], ['防守', 46], ['射门', 50], ['传球', 80], ['耐力', 60]]; var mCount = mData.length; //边数 var mCenter = mW /2; //中心点 var mRadius = mCenter - 50; //半径(减去的值用于给绘制的文本留空间) var mAngle = Math.PI * 2 / mCount; //角度 var mCtx = null; var mColorPolygon = '#B8B8B8'; //多边形颜色 var mColorLines = '#B8B8B8'; //顶点连线颜色 var mColorText = '#000000'; //初始化 (function(){ var canvas = document.createElement('canvas'); document.body.appendChild(canvas); canvas.height = mH; canvas.width = mW; mCtx = canvas.getContext('2d'); drawPolygon(mCtx); drawLines(mCtx); drawText(mCtx); drawRegion(mCtx); drawCircle(mCtx); })(); // 绘制多边形边 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(); } //顶点连线 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(); } //绘制文本 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(); } //绘制数据区域 function drawRegion(ctx){ ctx.save(); ctx.beginPath(); for(var i = 0; i < mCount; i ++){ var x = mCenter + mRadius * Math.cos(mAngle * i) * mData[i][1] / 100; var y = mCenter + mRadius * Math.sin(mAngle * i) * mData[i][1] / 100; ctx.lineTo(x, y); } ctx.closePath(); ctx.fillStyle = 'rgba(255, 0, 0, 0.5)'; ctx.fill(); ctx.restore(); } //画点 function drawCircle(ctx){ ctx.save(); var r = mCenter / 18; for(var i = 0; i < mCount; i ++){ var x = mCenter + mRadius * Math.cos(mAngle * i) * mData[i][1] / 100; var y = mCenter + mRadius * Math.sin(mAngle * i) * mData[i][1] / 100; ctx.beginPath(); ctx.arc(x, y, r, 0, Math.PI * 2); ctx.fillStyle = 'rgba(255, 0, 0, 0.8)'; ctx.fill(); } ctx.restore(); } </script> </body> </html>
觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ html5教程，巧夺天工，精雕玉琢。小宝典献丑了！
脚本宝典总结
以上是脚本宝典为你收集整理的html5教程-HTML5Canvas制作雷达图实战全部内容，希望文章能够帮你解决html5教程-HTML5Canvas制作雷达图实战所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
猜你在找的html5相关文章
- 关于移动端h5开发相关内容总结 2022-05-17
- html5教程-学表单的第二天 2018-12-10
- html5教程-HTML5浏览器支持 2018-12-10
- html5教程-HTML5智能表单 2018-12-10
- html5教程-微信H5使用resLoader实现加载页效果 2018-12-10
- html5教程-day01-初级-JS0-热身运动、JS入门教程 2018-12-10
- html5教程-html5shiv.js和respond.min.js 2018-12-10
- html5教程-不同浏览器对于html5 audio标签和音频格式的兼容性 2018-12-10
- html5教程-使用Html5实现手风琴案例 2018-12-10
- html5教程-html5笔记 2018-12-10
全站导航更多
html5HTML/XhtmlCSSXML/XSLTDreamweaver教程Frontpage教程心得技巧JavaScriptASP.NETPHP编程正则表达式AJAX相关ASP编程JSP编程编程10000问CSS/HTMLFlexvbsDOS/BAThtahtcpythonperl游戏相关VBA远程脚本ColdFusionMsSqlMysqlmariadboracleDB2mssql2008mssql2005SQLitePostgreSQLMongoDB星外虚拟主机华众虚拟主机Linuxwin服务器FTP服务器DNS服务器Tomcatnginxzabbix云和虚拟化bios系统安装系统系统进程Windows系列LINUXRedHat/CentosUbuntu/DebianFedoraSolaris红旗Linux建站经验微信营销网站优化网站策划网络赚钱网络创业站长故事alexa域名photoshop教程摄影教程Fireworks教程CorelDraw教程Illustrator教程Painter教程Freehand教程IndesignSketch笔记本主板内存CPU存储显卡显示器光存储鼠标键盘平板电脑安全教程杀毒防毒安全设置病毒查杀脚本攻防入侵防御工具使用业界动态Exploit漏洞分析
最新html5教程