基于Canvas 六边形能力图（含动画）-干货满满~拿来就用！

在最近的工作中，有一个需求需要对个人进行多维度评分，UI需要我完成一个类似游戏中的能力六边形的绘制，如图：

看我们如何手打一点点实现吧。
先贴完整代码：

<!DOCTYPE html>
<html><body><!--定义画布容器，给个边框省的你们找不到--><canvas id="myCanvas" width="400" height="400" style="border:1px solid #d3d3d3;">Your browser does not support the HTML5 canvas tag.</canvas><script>//获取画布对象var c = document.getElementById("myCanvas");var ctx = c.getContext("2d");//背景及同心圆相关参数,var canvaseSide = 400,//canvaseSide: 画布大小，从width、height获得arcMaxR = 180, //背景中最大同心圆的半径arcNum = 5,    //同心圆的个数arcOffset = arcMaxR/arcNum, //同心圆的半径差arcXPoint = canvaseSide/2,  //圆心x坐标arcYPoint = canvaseSide/2;  //圆心y坐标//六边形相关参数,var sideL = arcMaxR, //六边形边长（与最大同心圆半径同长，你们可以自己算下）yOffset = (Math.sqrt(3) * sideL) / 2, //y坐标的偏移量 cos 30° * 边长 xOffset = sideL / 2,  //x坐标的偏移量 sin 30° * 边长startY = canvaseSide/2, //定义point1 也就是起始点的坐标XstartX = startY - arcMaxR;//定义point1 也就是起始点的坐标Y//定义六边形的6个点，点位置如下图所示var pointArray = [{"id":1, "x": startX, "y": startY },{"id":2, "x": startX + xOffset, "y": startY + yOffset }, {"id":3, "x": startX + xOffset + sideL, "y": startY + yOffset },{"id":4, "x": startX + 2 * xOffset + sideL, "y": startY },{"id":5, "x": startX + xOffset + sideL, "y": startY - yOffset }, {"id":6, "x": startX + xOffset, "y": startY - yOffset }];//留个维度的得分var socreArray = [{"id":1,"score":80},{"id":2,"score":80},{"id":3,"score":80},{"id":4,"score":80},{"id":5,"score":80},{"id":6,"score":100},];//计算分数以及每次更新的x坐标长度var maxIndex , minIndex;var drawScoreFrames = 24;var drawCount = 0;/** 绘制背景图片*/function drawBG(){//清空画布ctx.clearRect(0,0,c.width,c.height);ctx.beginPath();//绘制同心圆极其背景for (var i = arcNum; i >= 0; i--) {ctx.strokeStyle = "#E5EBEE";ctx.arc(arcXPoint, arcYPoint, i * arcOffset, 0, 2 * Math.PI);if (i == arcNum) {ctx.fillStyle = "#F5FAFC";ctx.fill();}}//绘制连线，画出1-4,2-5,3-6 六边形顶点的连线for(var i=0;i<3;i++){var startPoint = pointArray[i],endPoint = pointArray[i+3];ctx.strokeStyle = "#E5EBEE";ctx.moveTo(startPoint.x,startPoint.y);ctx.lineTo(endPoint.x,endPoint.y);ctx.stroke();}//绘制六边形六个角的实心圆点for(var i=0;i<pointArray.length;i++){var point = pointArray[i];ctx.strokeStyle = "#2F8BF2";ctx.fillStyle = "#2F8BF2";ctx.beginPath();ctx.arc(point.x, point.y, 4, 0, 2 * Math.PI);ctx.fill();ctx.stroke();}}//计算分数以及每次更新的x坐标长度，主要思路，已固定的圆心坐标为参考系，定义到1,2,3,4,5,6点的线段上展示分数时每次的变化偏移量//这个变化变异量与 维度得分、哪条线段、总共渲染帧数有关for(var i=0;i<socreArray.length;i++){var scoreD = socreArray[i],scoreId = scoreD.id,scoreVal = scoreD.score;if(scoreId == 1){scoreD.xoffset = - (scoreVal* arcMaxR)/(100 * drawScoreFrames);scoreD.yoffset = 0;}if(scoreId == 2){scoreD.xoffset = - (scoreVal* arcMaxR)/(200 * drawScoreFrames);scoreD.yoffset = - (Math.sqrt(3)* scoreVal * arcMaxR)/(200 * drawScoreFrames);}if(scoreId == 3){scoreD.xoffset =  (scoreVal* arcMaxR)/(200 * drawScoreFrames);scoreD.yoffset = - (Math.sqrt(3)* scoreVal * arcMaxR)/(200 * drawScoreFrames);if(scoreVal > socreArray[1].score){maxIndex = 2;}else{maxIndex = 1;}}if(scoreId == 4){scoreD.xoffset =  (scoreVal* arcMaxR)/(100 * drawScoreFrames);scoreD.yoffset = 0;}if(scoreId == 5){scoreD.xoffset =  (scoreVal* arcMaxR)/(200 * drawScoreFrames);scoreD.yoffset =  (Math.sqrt(3)* scoreVal * arcMaxR)/(200 * drawScoreFrames);}if(scoreId == 6){scoreD.xoffset = - (scoreVal* arcMaxR)/(200 * drawScoreFrames);scoreD.yoffset =  (Math.sqrt(3)* scoreVal * arcMaxR)/(200 * drawScoreFrames);if(scoreVal > socreArray[4].score){minIndex = 5;}else{minIndex = 4;}}}/*** 动态渲染得分，思路如下* 1、每次清空上次的BG（同心圆）并重新绘制* 2、根据这是第几次渲染，计算圆心到1-6个点连线的坐标* 3、将坐标连接起来渲染成六边形，并定时开始下一次渲染实现动画*/function dyncDrawSoce(){if(drawCount>drawScoreFrames){return;}drawBG();ctx.beginPath();var grdStartX ,grdStartY,grdEndX,grdEndy;for(var i=0;i<socreArray.length;i++){var scoreD = socreArray[i];if(i == 0){ctx.moveTo(arcXPoint+scoreD.xoffset *drawCount, arcYPoint+scoreD.yoffset *drawCount);}else{if(i == maxIndex){grdStartX = arcXPoint+scoreD.xoffset *drawCount;grdStartY =  arcYPoint+scoreD.yoffset *drawCount;}if(i == minIndex){grdEndX = arcXPoint+scoreD.xoffset * drawCount;grdEndy =  arcYPoint+scoreD.yoffset * drawCount;}ctx.lineTo(arcXPoint+scoreD.xoffset * drawCount, arcYPoint+scoreD.yoffset * drawCount);}}ctx.closePath();//TODO 这个地方绘制六边形//ctx.fill();ctx.strokeStyle = '#4C9CF6';var grd=ctx.createLinearGradient(grdStartX,grdStartY,grdEndX,grdEndy);grd.addColorStop(1,"rgb(122,190,241,0.4)");grd.addColorStop(0,"rgb(255,255,255,0.4)");ctx.fillStyle = grd;ctx.stroke();ctx.fill();drawCount++;setTimeout("dyncDrawSoce();",500/drawScoreFrames);}dyncDrawSoce();</script></body></html>

基于Canvas 六边形能力图（含动画）-干货满满~拿来就用！相关推荐

php 六边形属性图能力数值图,详解基于 Canvas 手撸一个六边形能力图
一.前言六边形能力图如下,由 6 个六边形组成,每一个顶点代表其在某一方面的能力.这篇文章我们就来看看如何基于 canvas 去绘制这么一个六边形能力图.当然,你也可以基于其他开源的 js 方案来 ...
html5如何编写六角形,详解基于 Canvas 手撸一个六边形能力图
一.前言六边形能力图如下,由 6 个六边形组成,每一个顶点代表其在某一方面的能力.这篇文章我们就来看看如何基于 canvas 去绘制这么一个六边形能力图.当然,你也可以基于其他开源的 js 方案来 ...
7个华丽的基于Canvas的HTML5动画
说起HTML5,可能让你印象更深的是其基于Canvas的动画特效,虽然Canvas在HTML5中的应用并不全都是动画制作,但其动画效果确实让人震惊.本文收集了7个最让人难忘的HTML5 Canvas动 ...
[七夕节]——一款基于canvas绘制五颜六色线条合成一个爱心发光动画特效
Canvas基本介绍 Canvas介绍 1.canvas是html5的一个新标签,属于h5的新特性 2.canvas标签是一个图形的容器,简单点说就是一块画布,你可以在上画矩形,圆形,三角形,折线等等 ...
基于Canvas的动画基本原理与数理分析
转载自https://www.jianshu.com/p/e70c9cfbdb38 什么是动画? 就像思考哲学问题无法回避思维和存在的关系一样,制作动画同样无法逃避的问题是动画的原理是什么?这里提一句 ...
基于canvas使用粒子拼出你想要的文字[2]——粒子的动画效果
写在最前本次分享一个用canvas粒子渲染文字的"完整"版实现,功能包括:随机粒子缓动动画,粒子汇聚.发散,并拼出你想要的文字.本文继续上面一节基于canvas使用粒子拼出你想要 ...
canvas换图时候会闪烁_基于Canvas实现的高斯模糊（上）「JS篇」
作者:iNahoo 转发链接:https://mp.weixin.qq.com/s/5TxPjznpEBku_ybSMBdnfw 目录基于Canvas实现的高斯模糊(上)「JS篇」本篇基于Canv ...
skycons.js 基于canvas的天气动态js插件
skycons.js 基于canvas的天气动态js插件 skycons.js是一个开源的javascript天气动画图标渲染器.相当于gif动图一样. skycons CDN地址:https://w ...
微信小程序-基于canvas画画涂鸦
代码地址如下: http://www.demodashi.com/demo/14461.html 一.前期准备工作软件环境:微信开发者工具官方下载地址:https://mp.weixin.qq.c ...

基于Canvas 六边形能力图（含动画）-干货满满~拿来就用！

基于Canvas 六边形能力图（含动画）-干货满满~拿来就用！相关推荐

最新文章

热门文章