Canvas绘制六边形网格

已于 2022-01-23 18:39:03 修改
阅读量1.2k 收藏 9
点赞数 3
文章标签： javascript 前端 html canvas
于 2022-01-15 23:59:42 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42467340/article/details/122518308
版权

使用Canvas绘制六边形网格。
主要思路是先画给定中心点的六边形，然后二重循环遍历所有中心点，画所有的六边形。

<!DOCTYPE HTML>
<html>
<body>

<canvas id="myCanvas" width="300" height="150">
    <p>你的浏览器不支持Canvas</p>
</canvas>
<br>
<p id='p1'></p>
<script type="text/javascript">
"use strict";
var canvas=document.getElementById('myCanvas');
if (canvas.getContext) {
    var k=3;
    var d=30;
    var w=Math.sqrt(3)*d;
    var h=3/2*d;
    canvas.width=2*k*w;
    canvas.height=2*k*h+h/2;
    var o=[canvas.width/2,canvas.height/2];
    document.getElementById('p1').innerHTML='画布宽'+canvas.width+',高'+canvas.height;
    var ctx=canvas.getContext('2d');
    ctx.fillStyle='AntiqueWhite';
    ctx.fillRect(0,0,canvas.width,canvas.height);
    ctx.strokeStyle='blue';
    ctx.beginPath();
    var vs=[[0,d],[-w/2,d/2],[-w/2,-d/2],
            [0,-d],[w/2,-d/2],[w/2,d/2]];
    function one(xo,yo){
        ctx.moveTo(xo+vs[5][0],yo+vs[5][1]);
        for(var i=0;i<vs.length;i++){
            ctx.lineTo(xo+vs[i][0],yo+vs[i][1]);
        }
    }
    for(var i=-k+1;i<k;i++){
        for(var j=0;j<2*k-1-Math.abs(i);j++){
            one(o[0]+(-k+1+Math.abs(i)/2+j)*w,o[1]+h*i);
        }
    }
    ctx.stroke();
}
else{
    console.log('你的浏览器不支持Canvas');
}
</script>

</body>
</html>

效果如下：
在这里插入图片描述
更新：增加了一些选项，边长和颜色可以设置。网页的图标也用六边形画出。

<!DOCTYPE HTML>
<html>
<head>
<title>六边形网格</title>
<link id="link" rel="shortcut icon" type="image/x-icon">
<style>
#bc1,#bc2{width:25px;}
#bj,#xt,#tc{width:20px;}
</style>
</head>
<body>
<p>设置大六边形边长: <input id='bc1' value="3" onchange="generate()"> 小六边形<br>
设置小六边形边长: <input id='bc2' value="24" onchange="generate()"> 像素(px)<br>
设置背景色 <input type="color" id="bj" value="#c8ffff" onchange="generate()"/>
设置线条色 <input type="color" id="xt" value="#0000ff" onchange="generate()"/>
设置填充色 <input type="color" id="tc" value="#faebd7" onchange="generate()"/></p>
<p id='p1'></p>
<canvas id="myCanvas" width="300" height="150">
<p>你的浏览器不支持Canvas</p>
</canvas>
<script type="text/javascript">
"use strict";
document.getElementById('bc1').value=2;
generate();
link.href=myCanvas.toDataURL({format:'image/png', quality:1});
document.getElementById('bc1').value=3;
generate();
function generate(){
    var bc1=document.getElementById('bc1').value;
    var bc2=document.getElementById('bc2').value;
    var k=Number(bc1);
    var d=Number(bc2);
    var bj=document.getElementById('bj').value;
    var xt=document.getElementById('xt').value;
    var tc=document.getElementById('tc').value;
    var canvas=document.getElementById('myCanvas');
    if(bc1>200){
        var c=confirm('六边形个数过多时网页会卡，是否继续？');
        if(!c){
            return;
        }
    }
    if(canvas.getContext) {
        var w=Math.sqrt(3)*d;
        var h=3/2*d;
        var count=3*k*k-3*k+1;
        canvas.width=2*k*w;
        canvas.height=2*k*h+h/2;
        var o=[canvas.width/2,canvas.height/2];
        document.getElementById('p1').innerHTML='画布宽'+canvas.width+'px,高'+canvas.height+'px,含有'+count+'个小六边形';
        var ctx=canvas.getContext('2d');
        ctx.fillStyle=bj;
        ctx.fillRect(0,0,canvas.width,canvas.height);
        ctx.beginPath();
        var vs=[[0,d],[-w/2,d/2],[-w/2,-d/2],[0,-d],[w/2,-d/2],[w/2,d/2]];
        function one(xo,yo){
            ctx.beginPath();
            ctx.moveTo(xo+vs[5][0],yo+vs[5][1]);
            for(var i=0;i<vs.length;i++){
                ctx.lineTo(xo+vs[i][0],yo+vs[i][1]);
            }
            ctx.strokeStyle=xt;
            ctx.lineWidth=2;
            ctx.stroke();
            ctx.fillStyle=tc;
            ctx.fill();
        }
        for(var i=-k+1;i<k;i++){
            for(var j=0;j<2*k-1-Math.abs(i);j++){
                one(o[0]+(-k+1+Math.abs(i)/2+j)*w,o[1]+h*i);
            }
        }
    }
    else{
        console.log('你的浏览器不支持Canvas');
    }
}
</script>
</body>
</html>

效果如下：
在这里插入图片描述
第二次更新：其实本图形的绘制需求来自《蜂巢迷宫》游戏，下面的版本为的是能够直接在六边形网格上编辑文字。
首先在每个小六边形的相应位置添加输入框（用的绝对定位），改变背景色和边框使得不可见，当鼠标放上以及聚焦时改变背景色和边框，在改变大六边形边长时清空输入框并重新生成，在改变小六边形边长时修改输入框的位置，在改变颜色时无需改动输入框。
代码如下：


<!DOCTYPE HTML>
<html>
<head>
<title>六边形网格</title>
<link id="link" rel="shortcut icon" type="image/x-icon" href="">
<style>
#bc1,#bc2{width:25px;}
#bj,#xt,#tc{width:20px;}
input{
    font-size: 16px;
}
#note{
    font-size: 16px;
    font-family: 'Arial';
    height:90px;
}
input::-webkit-outer-spin-button,input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}
input[type="number"]{
    -moz-appearance: textfield;
}
</style>
</head>
<body>
<p>
设置大六边形边长:
<input id='bc1' type="number" value="3" onchange="document.getElementById('bc1s').value=this.value;change(this.id,this.value)"> 小六边形
<input id="bc1s" type="range" min="1" max="20" step="1" value="3" oninput="document.getElementById('bc1').value=this.value;" onchange="change('bc1',this.value);"/>
<span style="color: gray;">(仅改变此项时会清空文本框内容)</span>
<br>
设置小六边形边长:
<input id='bc2' type="number" value="24" onchange="document.getElementById('bc2s').value=this.value;change(this.id,this.value)"> 像素(px)
<input id="bc2s" type="range" min="1" max="50" step="1" value="24" oninput="document.getElementById('bc2').value=this.value;" onchange="change('bc2',this.value);"/>
<br>
设置背景色 <input type="color" id="bj" value="#c8ffff" onchange="change(this.id,this.value)"/>
设置线条色 <input type="color" id="xt" value="#0000ff" onchange="change(this.id,this.value)"/>
设置填充色 <input type="color" id="tc" value="#faebd7" onchange="change(this.id,this.value)"/></p>
<p id='p1'></p>
<canvas id="myCanvas" width="300" height="150">
<p>你的浏览器不支持Canvas</p>
</canvas>
<div id='texts'>div</div>
<br>
<textarea id='note' placeholder='点击输入笔记(拖动右下角可调整输入框大小)'></textarea>
<script type="text/javascript">
"use strict";
var canvas=document.getElementById('myCanvas');
if(canvas.getContext) {//如果浏览器支持Canvas
    var ctx=canvas.getContext('2d');
    var dic={};//输入参数的对象
    var para=['bc1','bc2','bj','xt','tc'];
    for(var i=0;i<para.length;i++){
        dic[para[i]]=document.getElementById(para[i]).value;
    }
    dic['bc1']=2;
    generate(0);
    link.href=myCanvas.toDataURL({format:'image/png', quality:1});//修改网页图标
    dic['bc1']=3;
    generate(2);
}
else{
    console.log('你的浏览器不支持Canvas');
}
function make_texts(i,j,xo,yo,w,h,c){
    //生成文本框
    //i,j为横纵序号，xo,yo为中心坐标，w,h为宽高
    var text =document.createElement('input');
    text.id='t_'+i+','+j;
    text.style['left']=xo-w/2+2+'px';
    text.style['top']=yo-h/2+1+'px';
    text.style['width']=w-6+'px';
    text.style['height']=h-6+'px';
    text.style['position']='absolute';
    text.style['text-align']='center';
    text.style['outline']='none';
    text.style['border']='0px';
    text.style['background-color']=hexToRgba(c,0);
    // text.value=text.id.slice(2);//填充文本框，测试用
    text.onmouseover=function(){
        text.style['background-color']=hexToRgba(c,0.9);
    };
    text.onmouseout=function(){
        text.style['background-color']=hexToRgba(c,0);
    }
    text.onfocus=function(){
        text.style['border']='1px solid red';
    }
    text.onblur=function(){
        text.style['border']='0px';
    }
    document.getElementById('texts').appendChild(text);
}
function move_texts(i,j,xo,yo,w,h){
    //移动文本框
    //i,j为横纵序号，xo,yo为中心坐标，w,h为宽高
    var text =document.getElementById('t_'+i+','+j);
    text.style['left']=xo-w/2+2+'px';
    text.style['top']=yo-h/2+1+'px';
    text.style['width']=w-6+'px';
    text.style['height']=h-6+'px';
}
function one(vs,xo,yo,xt,tc){
    ctx.beginPath();
    ctx.moveTo(xo+vs[5][0],yo+vs[5][1]);
    for(var i=0;i<vs.length;i++){
        ctx.lineTo(xo+vs[i][0],yo+vs[i][1]);
    }
    ctx.strokeStyle=xt;
    ctx.lineWidth=2;
    ctx.stroke();
    ctx.fillStyle=tc;
    ctx.fill();
}
function change(id,v){
    dic[id]=document.getElementById(id).value;
    if(dic['bc1']>100){
        var c=confirm('六边形个数过多时网页会卡，是否继续？');
        if(!c){return;}
    }
    if(id=='bc1'){
        generate(2);//大六边形边长修改时，清空文本框，重新生成
    }
    else if(id=='bc2'){
        generate(1);//小六边形边长修改时，移动文本框位置
    }
    else{
        generate(0);//颜色改变时，不改变文本框
    }
}
function generate(change_size){
    var k=Number(dic['bc1']);//大六边形边长,单位小六边形
    var d=Number(dic['bc2']);//小六边形边长,单位像素(px)
    var w=Math.sqrt(3)*d;//小六边形宽度
    var h=3/2*d;//小六边形高度
    var count=3*k*k-3*k+1;//小六边形个数
    canvas.width=2*k*w;
    canvas.height=2*k*h+h/2;
    document.getElementById('p1').innerHTML='画布宽'+canvas.width+'px,高'+canvas.height+'px,含有'+count+'个小六边形';
    var ctop=canvas.getBoundingClientRect().top;
    var cleft=canvas.getBoundingClientRect().left;
    var o=[canvas.width/2,canvas.height/2];
    ctx.fillStyle=dic['bj'];
    ctx.fillRect(0,0,canvas.width,canvas.height);
    ctx.beginPath();
    var vs=[[0,d],[-w/2,d/2],[-w/2,-d/2],[0,-d],[w/2,-d/2],[w/2,d/2]];
    if(change_size==2){
        //移除所有文本框
        document.getElementById('texts').innerHTML='';
    }
    for(var i=-k+1;i<k;i++){
        for(var j=0;j<2*k-1-Math.abs(i);j++){
            var xo=o[0]+(-k+1+Math.abs(i)/2+j)*w;
            var yo=o[1]+h*i
            one(vs,xo,yo,dic['xt'],dic['tc']);
            if(change_size==2) make_texts(i,j,cleft+xo,ctop+yo,w,d,dic['bj']);
            else if(change_size==1) move_texts(i,j,cleft+xo,ctop+yo,w,d);
        }
    }
    document.getElementById('note').style['width']=canvas.width+'px';
    document.getElementById('note').style['border']='1px solid'+dic['xt'];
}
function hexToRgba(hex, opacity) {
    return 'rgba(' + parseInt('0x' + hex.slice(1, 3)) + ',' + parseInt('0x' + hex.slice(3, 5)) + ','
    + parseInt('0x' + hex.slice(5, 7)) + ',' + opacity + ')';
    //JS - 将十六进制的颜色值转成rgb、rgba格式 https://www.hangge.com/blog/cache/detail_2291.html
}
</script>
</body>
</html>

效果如下：
在这里插入图片描述
在线预览网址: https://fun.rth1.me/text6.html

vectoru
关注
  • 3
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
canvas画正六边形
熊猫正尽责
11-09 1万+
效果图如下： 代码如下： 正六边形 var canvas = document.querySelector('#canvas'), context = canvas.getContext('2d'); // 定义边长、颜色、边数、canvas大小 var length = 100, fillColor = '#000', vertices
实现六边形网格
strivero的博客
05-16 6651
打开1场景，运行就可以看到效果。 所有的六边行都都是通过顶点数绘制到Mesh上的。只用了一个网格，一个材质。点击地图上的某个六边形时，将这个六边形的颜色设置为红色，之后再重写根据所有六边行的顶点数和颜色绘制Mesh网格。代码比较简单，三个文件 SixangleDatas ：提供六边形行列的数据 Sixangle ：传入六边形坐标，外半径，状态。 vertices 存储六边形的顶点数，colo
vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化
05-12
vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia
vue+canvas绘制图形
01-09
文件中有封装好的绘制圆形、矩形以及不规则图形的方法，直接拿到适合自己的场合下用即可
Canvas如何画一个网格线条
weixin_54048131的博客
05-08 138
【代码】Canvas如何画一个网格线条。
uniapp通过Canvas绘制网格（心电图，坐标纸等可用）
最新发布
Agont_的博客
05-29 880
通过这段代码，可以将网格的外边距取消，并且将网格的背景颜色改成黑色(或者其他颜色自己喜欢就好)，通过这种改变DIV的背景颜色实现对网格添加背景颜色的方法，有利于我们之后在心电图操作中“显示/隐藏”网格的操作选项。所需要的高级网格需要三种大小的网格，分别为大、中、小，这三种网格需要被同时调用执行，故专写一个函数来共同调用三种大小的绘制函数。我之前文档内的心电图同款网格只需要将小型网格和大型网格函数删除，并且在总函数内，删除对这两个函数的调用即可。同时，将网格的颜色改变，即可实现我之前文档中的心电图同款网格。
canvas绘制基础图形（canvas 气泡框 网格线 三角形 圆角矩形 箭头）
qq_32886245的博客
03-13 1523
canvas绘制基础图形 这两天整理了下项目中用到的函数，学着博客里的方法封装成了一个插件，若有不对的地方，还请不吝赐教，谢谢！ javascript立即执行函数 怎样用原生JS封装自己需要的插件 canvas Two 三角形 Canvas学习：绘制箭头 功能介绍 1.初始化画布 initCanvas 2.绘制网格线 drawGridlines 3.绘制圆点 drawDot 4.绘制圆环...
canvas绘制网格线示例
大剑师兰特的GIS世界
01-02 1079
如何使用canvas绘制网格线呢？方法其实很简单，就是绘制一些等距间隔的横线和竖线，形成一个网格。通常在地图的绘制当中会用到，下面是大剑师的一个示例
Vue2版本 六边形 蜂窝 Demo
07-29
可配置大小，间距。 放入vue项目可直接运行
Canvas 矩形内斜线网格绘制
weixin_42208812的博客
07-26 324
Canvas绘制
使用canvas绘制六边形
风舞红枫的个人博客
12-01 1733
近期遇到了一个六边形边框的需求，实现如下图效果：有六边形边框，中间是一张图片，图片超出的部分要裁切掉。 代码实现如下： <html> <head> <style> html,body{ width:100%; height:100%; padding:0; margin:0; } canvas{ position: absolute; top:0; left:0; right:0;
canvas 详解 —— 绘制篇
qq_42880714的博客
07-22 8284
canvas 详解 —— 绘制篇
详解基于 Canvas 手撸一个六边形能力图
01-19
一、前言 六边形能力图如下，由 6 个 六边形组成，每一个顶点代表其在某一方面的能力。这篇文章我们就来看看如何基于 canvas 去绘制这么一个六边形能力图。当然，你也可以基于其他开源的 js 方案来实现，如 EChars.js 等。   二、六边形绘制基础 六边形能力图有 6 个 六边形组成，那我们只要绘制出一个，另外 5 个则依次减小六边形的边长即可。那我们首先来分析一下，如何绘制出一个六边形。 如上图，绘制一个六边形有以下几个关键点： 1.紫色矩形区域我们可以看成是 canvas 的画布。其大小可以认为是 (width,height)。center(centerX,centerY) 是
react-hexgrid:使用React构建交互式六边形网格
05-17
React网格 React组件以构建交互式六边形网格。 它使用SVG，从而使其快速，可扩展且易于应用自定义样式。 您只需配置即可轻松自定义网格的布局。 基于组件的方法允许您自定义网格形状以适合您的需求，甚至可以将您自己的组件/ SVG元素应用到其中。 您可以使用预定义的生成器来创建特定的形状网格，也可以完全构建自己的网格以达到所需的形状，同时仍保持其控制和交互性。 您可以轻松地使用此库来构建（仅举几例）漂亮的作品集，图像库甚至是游戏！ 从获得灵感。 先决条件 您应该熟悉Node + NPM，React和ES6才能使用此库。 库在很大程度上也依赖于HTML5功能（主要是SVG），所有浏览器都可能不支持所有这些功能。 例如操作仍在进行中。 入门 通过npm安装： npm install --save react-hexgrid 更多文档。 例子 import { HexGrid,
js-hexagonal:在 JavaScript 和 HTML5 中试验六边形和六边形网格
07-06
4. **绘制**：利用 HTML5 的 Canvas API 或 SVG 来绘制六边形。Canvas 提供了动态绘图的能力，可以实时更新网格；而 SVG 更适合静态或响应式的矢量图形。 在 `js-hexagonal` 项目中，开发者可能通过以下方式实现...
android-hexagonal-grids:使用圆形视图实现六边形网格模型的 Android 应用程序
06-21
总结起来，“android-hexagonal-grids”项目是一个展示如何在Android应用中创建六边形网格的实例，它涉及到自定义视图、图形绘制、坐标转换、数据结构和事件处理等多个技术点。通过学习这个项目，开发者可以提升自己...
kivy-hexagonal-grids:Kivy 六边形网格
06-11
这个特定的项目，"kivy-hexagonal-grids"，聚焦于在Kivy中实现六边形网格布局，这对于游戏开发、数据可视化或者任何需要非传统布局的应用程序来说非常有用。 **Kivy框架** Kivy是一个开源的Python库，专门用于开发...
android六边形布局
12-22
1. 自定义View：开发者可以创建一个继承自`View`或`ViewGroup`的类，重写`onDraw()`方法，通过Canvas进行图形绘制，实现六边形的形状。同时，需要处理触摸事件和子视图的添加与布局。 2. 使用Shape Drawable：通过...
HTML5 Canvas霓虹灯蜂巢特效特效代码
03-20
在本特效中，开发者可能先定义了一个六边形的顶点坐标，然后通过循环绘制多个旋转和偏移的六边形，形成蜂巢结构。 霓虹灯效果的实现通常涉及颜色过渡和光照效果。开发者可能会使用`fillStyle`或`strokeStyle`属性...
uniapp中使用vue3通过canvas绘制蓝色网格
12-15
以下是使用Vue3和Canvas在Uniapp中绘制蓝色网格的示例代码： ```vue <canvas ref="canvas" @ready="onReady" /> import { onMounted, ref } from 'vue' export default { setup() { const canvasRef = ref...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值