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

最新推荐文章于 2024-06-11 10:03:02 发布
最新推荐文章于 2024-06-11 10:03:02 发布
阅读量1.2w 收藏 14
点赞数 3
文章标签： canvas html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yongzizhi956/article/details/107933806
版权

在最近的工作中，有一个需求需要对个人进行多维度评分，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 也就是起始点的坐标X
            startX = 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>
爱偶尔受伤
关注
  • 3
    点赞
  • 踩
  • 14
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html5如何编写六角形,详解基于 Canvas 手撸一个六边形能力图
weixin_34080081的博客
06-30 5347
一、前言六边形能力图如下，由 6 个 六边形组成，每一个顶点代表其在某一方面的能力。这篇文章我们就来看看如何基于 canvas 去绘制这么一个六边形能力图。当然，你也可以基于其他开源的 js 方案来实现，如 EChars.js 等。二、六边形绘制基础六边形能力图有 6 个 六边形组成，那我们只要绘制出一个，另外 5 个则依次减小六边形的边长即可。那我们首先来分析一下，如何绘制出一个六边形。如上图，...
php 六边形 属性图 能力数值图,详解基于 Canvas 手撸一个六边形能力图
weixin_42552716的博客
04-12 3449
一、前言六边形能力图如下，由 6 个 六边形组成，每一个顶点代表其在某一方面的能力。这篇文章我们就来看看如何基于 canvas 去绘制这么一个六边形能力图。当然，你也可以基于其他开源的 js 方案来实现，如 EChars.js 等。详解基于 Canvas 手撸一个六边形能力图-1.jpg (17.59 KB, 下载次数: 0)2020-7-13 15:29 上传二、六边形绘制基础六边形能力图有 6...
Android画正N边形战力图
王温暖的博客
04-13 6500
看下效果图画的正六边形： 画正N边形最重要的就是求出N边形的每个顶点坐标，然后将这些顶点坐标连接起来就可以了。 我们可以将问题转化为求圆周上的每个点的坐标，首先要学习下Math.sin(弧度)、Math.cos(弧度)，注意这里的参数是弧度而非角的度数 弧度的计算公式为：角度*（PI/180） 30° 角度 的弧度 =30 * （PI/180） 如何得到圆上每个点的坐标？ 解决...
推荐项目：CSS Hexagon Generator —— 纯CSS六边形生成器
gitblog_00003的博客
06-11 452
推荐项目：CSS Hexagon Generator —— 纯CSS六边形生成器 项目地址:https://gitcode.com/brenna/csshexagon 1、项目介绍 CSS Hexagon Generator 是一个基于AngularJS的纯CSS六边形生成工具，由Brenna创建。该项目源于一个CodePen上的代码示例，并逐步发展成为了一个学习和实践AngularJS的优秀实例...
球员能力图(含具体分析过程)
weixin_42567027的博客
07-15 3045
文章目录球员能力图股票k线图 球员能力图 // An highlighted block import numpy as np import matplotlib.pyplot as plt from matplotlib.font_manager import FontProperties plt.style.use('ggplot')#绘图风格 font=FontProperties(fname=r'c:\windows\fonts\simsun.ttc',size=12) #字体与电脑匹配后正确识别
举个栗子~Tableau 技巧（238）：可灵活对比的雷达图（Radar Chart）
weixin_45588393的博客
09-17 4234
雷达图（Radar Chart）的优势是能够表达多个指标的对比情况。
绘制六芒星战斗力属性图 —— h5 canvas 初体验
热门推荐
Platonic Time
09-01 1万+
最近用MUI做Web app时想实现一个六芒星战斗力图的（类似LPL赛前战队实力分析图）效果，由于正多边形是十分规则的，所以感觉很轻易就可以用h5 canvas来实现。
详解基于 Canvas 手撸一个六边形能力图
01-19
这篇文章我们就来看看如何基于 canvas 去绘制这么一个六边形能力图。当然，你也可以基于其他开源的 js 方案来实现，如 EChars.js 等。   二、六边形绘制基础 六边形能力图有 6 个 六边形组成，那我们只要绘制出一个...
HTML5 Canvas 3D跳动Loading加载动画-可调节参数
11-09
Canvas是一个基于矢量图形的画布元素，通过JavaScript来控制和绘制图形。它的核心是Context对象，如2D Context和WebGL Context，后者用于3D渲染。在本例中，使用的是WebGL Context来实现3D效果。 WebGL是一种基于...
基于canvas花环图形动画特效.zip
07-11
这个"基于canvas花环图形动画特效.zip"文件显然包含了使用JavaScript和HTML5 Canvas实现的一种动态花环图形效果。接下来，我们将深入探讨如何利用Canvas API来创建这样的动画特效。 首先，Canvas API是一个低级的...
基于canvas的粒子文字动画特效.rar
最新发布
06-23
基于canvas的粒子文字动画特效.rar 基于canvas的粒子文字动画特效.rar 基于canvas的粒子文字动画特效.rar 基于canvas的粒子文字动画特效.rar 基于canvas的粒子文字动画特效.rar 基于canvas的粒子文字动画特效.rar ...
制作六边形图片
04-09
生成六边形图片 正样本，读取 生成灰度图
多边形图片生成器v1.0绿色免费版
08-04
多边形图片生成器是一款非常好用且可以快速制作多边形图片的分局，通过这款软件生成的结果可以导出为图片，无论是用于网页设计还是印刷方面质量都可以满足你的要求。 功能介绍： Low Poly 原是 3D 建模中的术语，指使用相对较少的点线面来制作的低精度模型，一般网游中的模型都属于低模。而现在，Low Poly 进入了平面设计领域，继扁平化（Flat Design）、长阴影（Long Shadow）
android自定义view多边形战斗力分析图任意多边形
09-14
android自定义view多边形战斗力分析图，支持任意多边形，可扩展
canvas-js-动画-例子
12-27
这个区域就像一个画布，我们可以用JavaScript的绘图API来在这个画布上绘制线条、形状、图像等。`<canvas>`标签通常会有一个id属性，以便我们在JavaScript代码中引用它。 在"0.html"中，首先需要获取到Canvas元素并...
cocos ClippingNode 之绘制六边形战力(一)
qq_24726043的博客
02-05 777
根据指定的模版(Stencil)裁剪图片生成不同的形状，可像普通的节点放到Node,Layer,Scene中。为了美观，我们需要两张图资源，一张用于背景，另一张用于裁切。用于对节点进行裁剪或遮罩，继承于。
unity 3d 实现六边形 战绩分布图
u011332732的专栏
11-28 2813
一个园 等分成 6份 ， 得出 六个 圆上的点， 两两画线得出 一个 六边形了 C# 代码部分： using System.Collections; using System.Collections.Generic; using UnityEngine; public class TmpGL : MonoBehaviour { // When added to an obje...
已实现：vue、h5项目如何使用echarts实现雷达图、六边形图表
Spy003的博客
01-30 1314
说实话，要说图表里，最强的应该属于echarts了，不管是接入难度上，还是样式多样性上，还有社区庞大程度上，都是首屈一指的，反观有的人习惯用chart.js了，这个无可厚非，但是如果你刚开始研究，我一定建议你直接用echarts吧。今天我已雷达图为例，展示一下echarts雷达图的实现，先看看运行截图吧，然后我直接帖代码。我将vue组件里所有js都贴出来了，以便大家伸手即用，里面的属性有注释，还有很多没贴出来的，大家可以搜一下，我只贴一些官方文档上说不清楚的地方，至于属性这里还是去看文档吧。
如何获得 “最大六边形” 的技能图
zxm2015的博客
07-07 5985
学习成就页包括贡献墙、个人能力、能力、最新动态和认可，今天的主角就是个人能力图，也叫个人能力雷达图。技能树答题、发布讨论帖、直播、gitcode提交代码、参加竞赛，有参加以上项目的，按照次数进行统计得分。
写一个方法用canvas生成六边形能力图
07-12
当然可以！以下是一个使用 Canvas 生成六边形能力图的方法： ```javascript function drawHexagonAbilityChart(canvas, abilities) { // 获取画布上下文 const ctx = canvas.getContext("2d"); // 设置六边形的参数 const hexagonRadius = 60; // 六边形半径 const centerX = canvas.width / 2; // 六边形中心点 x 坐标 const centerY = canvas.height / 2; // 六边形中心点 y 坐标 // 设置能力值的最大值和最小值 const maxValue = Math.max(...abilities); const minValue = Math.min(...abilities); // 设置能力图的颜色 const fillColor = "rgba(0, 128, 255, 0.5)"; const strokeColor = "rgba(0, 128, 255, 1)"; // 绘制能力图 ctx.beginPath(); for (let i = 0; i < abilities.length; i++) { const angle = (2 * Math.PI * i) / abilities.length - Math.PI / 2; const abilityValue = abilities[i]; // 计算能力值对应的半径 const radius = ((abilityValue - minValue) / (maxValue - minValue)) * hexagonRadius; // 计算六边形的顶点坐标 const x = centerX + radius * Math.cos(angle); const y = centerY + radius * Math.sin(angle); // 绘制六边形的边 if (i === 0) { ctx.moveTo(x, y); } else { ctx.lineTo(x, y); } } ctx.closePath(); // 填充能力图 ctx.fillStyle = fillColor; ctx.fill(); // 绘制能力图的边框 ctx.strokeStyle = strokeColor; ctx.lineWidth = 2; ctx.stroke(); } ``` 这个方法接受两个参数：`canvas` 是要绘制的 Canvas 元素，`abilities` 是一个包含各项能力值的数组。你可以根据实际情况传入不同的能力值数组来生成不同的能力图。调用这个方法后，会在指定的 Canvas 元素上生成对应的六边形能力图。 希望这个方法能够满足你的需求！如果有任何问题，请随时告诉我。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值