HTML5 Canvas制作雷达图实战

雷达图又叫蜘蛛网图，是一种对各项数据查看很明显的表现图，在很多游戏中，对游戏中的每个角色的分析图一般也用这种图。

下面，用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();
}

效果：

效果演示

height="372" width="100%" scrolling="no" title="雷达图" src="//codepen.io/lecein/embed/aJZGGp/?height=372&theme-id=0&default-tab=result" allowfullscreen="true">

最终代码

<!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>

代码下载：点击这里

博客名称：王乐平博客

CSDN博客地址：http://blog.csdn.net/lecepin

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/401674.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

AlphaBlend

AlphaBlend

AlphaBlend实现透明效果&#xff0c;只是仅仅能针对某块区域进行alpha操作&#xff0c;透明度可设。 TransparentBlt能够针对某种颜色进行透明&#xff0c;只是透明度不可设。 AlphaBlend&#xff1a; BLENDFUNCTION bn; bn.AlphaFormat 0; bn.BlendFlags 0; bn.BlendOp AC_…
阅读更多...
ECMAScript 6网页样式修正器

ECMAScript 6网页样式修正器

最近在看ES6这一方面的图书&#xff0c;在搜索的过程中发现了《ECMAScript 6 入门-阮一峰》&#xff0c;感觉还不错。因为我个从比较喜欢看纸质的书&#xff0c;就想把这本书给打印下来。 但是网页版的《ECMAScript 6 入门-阮一峰》设置的样式只适合在网页上查看&#xff0c;并…
阅读更多...
PWA(Progressive Web App)入门系列：（一）PWA简介

PWA(Progressive Web App)入门系列：（一）PWA简介

前言 PWA做为一门Google推出的WEB端的新技术&#xff0c;好处不言而喻&#xff0c;但目前对于相关方面的知识不是很丰富&#xff0c;这里我推出一下这方面的入门教程系列&#xff0c;提供PWA方面学习。 什么是PWA PWA全称Progressive Web App&#xff0c;直译是渐进式WEB应用…
阅读更多...
Vue DevTools可使用修正方法

Vue DevTools可使用修正方法

因为工作要求&#xff0c;目前主要在用Vue.js技术栈做开发&#xff0c;调试是必不可少的&#xff0c;这里会用的Vue DevTools的调试工具&#xff0c;问题就出在这里&#xff0c;当用Vue DevTools做调试时&#xff0c;很多时候都不能用&#xff0c;提示没有监测到Vue&#xff0c…
阅读更多...
ZRender实现粒子网格动画实战

ZRender实现粒子网格动画实战

注&#xff1a;本博文代码基于ZRender 3.4.3版本开发&#xff0c;对应版本库地址&#xff1a;ZRender 库。 效果 实现分析 通过上面显示的效果图&#xff0c;可以看出&#xff0c;这种效果就是在Canvas中生成多个可移动的点&#xff0c;然后根据点之间的距离来确定是否连线&am…
阅读更多...
CSS动画实战：创建一个太极Loading图

CSS动画实战：创建一个太极Loading图

这里主要是使用CSS的animation和伪类来构建&#xff0c;分析设定关键帧的执行顺序和时间段。 效果 动画分析 首先通过效果对动画执行进行一下分析&#xff1a; 边框的四条边进行按顺序动画加载 。矩形边框变为圆行边框。太极图内部图案渐渐出现。太极图旋转。整个动画逆序执…
阅读更多...
PWA(Progressive Web App)入门系列：（二）相关准备

PWA(Progressive Web App)入门系列：（二）相关准备

前言 在上一章中&#xff0c;对PWA的相关概念做了基本介绍&#xff0c;了解了PWA的组成及优势。为了能够更快的进入PWA的世界&#xff0c;这一章主要对在PWA开发中&#xff0c;需要注意的问题&#xff0c;运行的环境及调试工具做介绍说明。 浏览器要求 因为目前各浏览器对于…
阅读更多...
PWA(Progressive Web App)入门系列：（三）PWA关键技术Manifest

PWA(Progressive Web App)入门系列：（三）PWA关键技术Manifest

前言 前面说过&#xff0c;让Web App能够达到Native App外观体验的主要实现技术就是PWA中的manifest技术&#xff0c;本章会详细说明manifest的实现&#xff0c;及各个参数的具体含义&#xff0c;还将了解如何定义Web App的启动图标、启动样式等。 简介 manifest是一种简单的…
阅读更多...
利用百度LBS做一个小Demo

利用百度LBS做一个小Demo

为什么80%的码农都做不了架构师&#xff1f;>>> 申请ak&#xff08;即获取密钥&#xff09;http://lbsyun.baidu.com/apiconsole/key?applicationkey 去这儿注册一个开发者账号即可拼写发送http请求的url譬如这样的调用http://api.map.baidu.com/geocoder/v2/?ad…
阅读更多...
PWA(Progressive Web App)入门系列：（四）Promise

PWA(Progressive Web App)入门系列：（四）Promise

前言 这一章说一下ES6的Promise对象。为什么要在PWA系列的文章中讲Promise呢&#xff1f;因为PWA中的许多技术API中都是以Promise返回的方式返回的&#xff0c;为了对后续章节中PWA技术API更好的理解&#xff0c;这里就来说一个Promise对象。 Promise出现的背景 在JavaScrip…
阅读更多...
图文详解如何搭建Windows的Android C++开发环境

图文详解如何搭建Windows的Android C++开发环境

原地址:http://www.apkbus.com/android-18595-1-1.html ////TITLE:// 图文详解如何搭建Windows的Android C开发环境&#xff08;一&#xff09;//AUTHOR:// norains//DATE:// Thursday 14-April-2011//Environment:// Cygwin 1.7.9// Android NDK r5//1. 下载A…
阅读更多...
PWA(Progressive Web App)入门系列：（五）Web Worker

PWA(Progressive Web App)入门系列：（五）Web Worker

前言 在说Service Worker前有必要说一下Web Worker&#xff0c;因为Service Worker本身就属于Web Worker的延伸&#xff0c;大部分功能也是基于Web Worker进行的扩展。 背景 众所周知&#xff0c;JavaScript引擎是以单线程调度的方式进行&#xff0c;我们无法同时运行多个Ja…
阅读更多...
Glob Patterns匹配模式使用

Glob Patterns匹配模式使用

前段时间在用workbox时&#xff0c;在做precache时&#xff0c;匹配模式基于的是Glob Pattern模式&#xff0c;于是就看了下相关文档。 下面翻译一下node-glob的使用&#xff0c;原文&#xff1a;https://github.com/isaacs/node-glob#glob-primer Glob 像在shell里面&#x…
阅读更多...
Workbox CLI v3.x 中文版

Workbox CLI v3.x 中文版

在写PWA应用时&#xff0c;用到WorkBox工具&#xff0c;使用过程中发现没有中文的帮助文档&#xff0c;为了体验好一些&#xff0c;也为了方便自己和他人查看&#xff0c;在这里翻译了一下workbox-cli。 Workbox CLI 是什么? Workbox命令行&#xff08;在workbox-cli包内&…
阅读更多...
Workbox.routing v3.x 中文版

Workbox.routing v3.x 中文版

NAMESPACE STATIC VERSION V3.6.1 类 NavigationRoute NavigationRoute可以轻松创建匹配浏览器navigation requests的Route。 它仅匹配mode设置为navigate的请求。 您可以只使用blacklist和whitelist参数中的一个或两个&#xff0c;将此路由应用于导航请求中。 RegExpRout…
阅读更多...
Workbox.strategies v3.x 中文版

Workbox.strategies v3.x 中文版

NAMESPACE STATIC VERSION V3.6.1 该模块提供了大多数serviceworker常用的缓存策略的简单实现。 类 CacheFirst cache-first请求策略的实现。 缓存优先策略对于带版本号的资源是非常有用的&#xff0c;像这种URLstyles/example.a8f5f1.css&#xff0c;因为它们可以长时间缓存…
阅读更多...
集算器访问HTTP数据的代码示例

集算器访问HTTP数据的代码示例

使用集算器&#xff08;esProc&#xff09;可以很方便的从http数据源读取数据进行处理。本例子中有一个servlet&#xff0c;对外提供json格式的雇员信息查询。Servlet访问数据库的员工表&#xff0c;保存了员工的信息&#xff0c;如下&#xff1a;EID NAME SURNAME …
阅读更多...
PWA(Progressive Web App)入门系列：Cache Storage Cache

PWA(Progressive Web App)入门系列：Cache Storage Cache

前言 目前浏览器的存储机制有很多&#xff0c;如&#xff1a;indexedDB、localStorage、sessionStorage、File System API、applicationCache 等等&#xff0c;那为什么又制定了一套 Cache API 呢&#xff1f;对比其他存储机制有什么优势&#xff1f; 简介 Cache API 是一套…
阅读更多...
「浏览器插件」无广告国内视频平台直接播放插件

「浏览器插件」无广告国内视频平台直接播放插件

前段时间发现一些比较不错的解析国内视频平台的一些 API 接口&#xff0c;很早之前基于这些接口做过一个 Android 端的播放软件&#xff0c;但为了更方便使用吧&#xff0c;于是做了一个 Chrome 的浏览器插件&#xff0c;解析接口也是在线更新的&#xff0c;所以用起来会比较方…
阅读更多...
kafka性能测试(转)KAFKA 0.8 PRODUCER PERFORMANCE

kafka性能测试(转)KAFKA 0.8 PRODUCER PERFORMANCE

来自:http://blog.liveramp.com/2013/04/08/kafka-0-8-producer-performance-2/ At LiveRamp, we constantly face scaling challenges as the volume of data that our infrastructure must deal with continues to grow. One such challenge involves the logging system. At…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023