JavaScript Canvas绘制六边形网格

本文实例为大家分享了JavaScript Canvas绘制六边形网格的具体代码，供大家参考，具体内容如下

使用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>

效果如下：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vue.js实现网格列表布局转换方法

    Vue.js实现网格列表布局转换方法

    实现效果: 实现代码及注释: <!DOCTYPE html> <html> <head> <title>布局转换</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv=&quo

  • JavaScript实现拖拽元素对齐到网格（每次移动固定距离）

    JavaScript实现拖拽元素对齐到网格（每次移动固定距离）

    这几天在做一个拖拽元素的附加功能,就是对齐到网格,实际上就是确定好元素的初始位置,然后拖拽元素时,每次移动固定的距离.让元素都可以在网格内对齐.先上效果图,然后在详细说明一下细节问题 做了一个gif图,可以看到,每次元素的移动都是按照最小单位距离移动的.且每次元素都是对齐到网格的. 先根据demo说明一下思路和细节,后面会给出demo代码. 1. 确定元素的每次移动的最小单位(demo中为10px和10px),也就是每次水平或垂直的位移量都是10px.铺上一层网格背景是为了帮助我们更好的看到效果

  • Three.js学习之网格

    Three.js学习之网格

    前言 小编之前发布过关于几何形状和材质,相信大家看过学习之后,我们就能使用他们来创建物体了.最常用的一种物体就是网格(Mesh),网格是由顶点.边.面等组成的物体:其他物体包括线段(Line).骨骼(Bone).粒子系统(ParticleSystem)等.创建物体需要指定几何形状和材质,其中,几何形状决定了物体的顶点位置等信息,材质决定了物体的颜色.纹理等信息. 1.创建网格 在前几篇中,我们学习了如何创建几何形状与材质,而网格的创建非常简单,只要把几何形状与材质传入其构造函数.最常用的物体是网

  • 原生JS实现图片网格式渐显、渐隐效果

    原生JS实现图片网格式渐显、渐隐效果

    先给出效果图: 写的小组件支持图片的渐显.渐隐,并且可以是有序.随机两种方式. 我采用的原型是属性写在构造函数内,方法写在原型对象内.方法写构造函数内有个问题,就是每次调用这个方法就相当于重新实例化一次,举个粟子: 实现网格效果的原理上是将读取图片的宽高,按照设定的参数,分成等高宽的网格(我用的span标签表示的网格),网格利用定位铺满整个图片,每个网格的背景图都是原图片,原理同sprite,利用background-position属性改变显示区域.接下来就是按照设定的顺序实现渐显或渐隐.渐显

  • JavaScript Canvas绘制六边形网格

    JavaScript Canvas绘制六边形网格

    本文实例为大家分享了JavaScript Canvas绘制六边形网格的具体代码,供大家参考,具体内容如下 使用Canvas绘制六边形网格. 主要思路是先画给定中心点的六边形,然后二重循环遍历所有中心点,画所有的六边形. <!DOCTYPE HTML> <html> <body> <canvas id="myCanvas" width="300" height="150">     <p>

  • 详解JavaScript+Canvas绘制环形进度条

    详解JavaScript+Canvas绘制环形进度条

    目录 效果图 思考 实现思路 具体代码实现 效果图 思考 移动端的场景里经常会出现环形进度条的功能,在实现这个功能前,我预想的解决方案大致有: echarts.antv.canvas.svg 前面两种第三方提供的解决方案当然是简单,拿到案例修整一下即可,但是需要下载依赖,而且代码量不小.有没有不需要依赖第三方包,采用原生的写法,独立封装成一个组件,降低耦合,而且性能优越? 当然,那就主要介绍canvas的使用 实现思路 可以展示整个圆.半圆以及任意角度弧形(左右对称)的进度条.整体思路如下: 1

  • JavaScript Canvas绘制动态线框效果

    JavaScript Canvas绘制动态线框效果

    本文实例为大家分享了JavaScript Canvas绘制动态线框效果的具体代码,供大家参考,具体内容如下 本周项目,移动端页面开发,要求丰富的动效,主要技术实现 Canvas :其中绘制动态线框,走了点弯路,所谓的弯路是逻辑问题,非技术实现方式. 一.涉及技术点,具体如下: 1.html 中引入canvas 标签,设置宽高: <canvas id="canvas" width=xx height=xx>您的浏览器不支持canvas,请更换版本</canvas>

  • JavaScript canvas绘制动态圆环进度条

    JavaScript canvas绘制动态圆环进度条

    本文实例为大家分享了JavaScript canvas绘制动态圆环进度条的具体代码,供大家参考,具体内容如下 由于使用的是vue开发,所以就展示一下绘制函数好了,上图是效果图 drawMain(drawing_elem, percent, forecolor, bgcolor) {             /*                 @drawing_elem: 绘制对象                 @percent:绘制圆环百分比, 范围[0, 100]            

  • JavaScript canvas绘制圆形加载进度条

    JavaScript canvas绘制圆形加载进度条

    本文实例为大家分享了JavaScript canvas绘制圆形加载进度条的具体代码,供大家参考,具体内容如下 1.需求:通过canvas绘制一个圆形的进度条 2.实现思路: 2.1 绘制灰色底框 2.2 创建变量保存结束角度值和加载进度值 2.3 创建定时绘制进度条 2.3.1 修改结束角度2.3.2 开始新路径绘制2.3.3 绘制加载圆环 3.实现过程如下: css样式设置 body {             text-align: center;         }         can

  • JavaScript canvas绘制圆弧与圆形

    本文实例为大家分享了canvas绘制圆弧与圆形的具体代码,供大家参考,具体内容如下 canvas 绘制圆弧 绘制圆弧使用 context.arc( ) 函数,包含六个参数. context.arc( centerx,centery,radius, startingAngle,endingAngle, anticlockwise = false ) 分别代表:圆心 x 值,圆心 y 值,半径,开始的弧度值,结束的弧度值,(是否逆时针). 例如: window: onload = function(

  • JavaScript canvas绘制渐变颜色的矩形

    JavaScript canvas绘制渐变颜色的矩形

    本文实例为大家分享了canvas绘制渐变颜色的矩形的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> canvas { border: 1px solid #ccc; } /* .linearGradient{ wi

  • JavaScript canvas绘制折线图

    JavaScript canvas绘制折线图

    本文实例为大家分享了canvas绘制折线图的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> canvas { border: 1px solid #ccc; } </style> </head&g

  • JavaScript Canvas绘制圆形时钟效果

    JavaScript Canvas绘制圆形时钟效果

    本文实例为大家分享了Canvas时钟效果展示的具体代码,供大家参考,具体内容如下 <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> canvas{ display: block; margin: 0 auto; background-color: #fdffad; border: 1px solid #0

  • 基于JavaScript canvas绘制贝塞尔曲线

    简单描述:页面上有四个点,鼠标拖动四个点的位置来改变贝塞尔曲线的形状,双击放置点位 效果图: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> html{overflow: hidden;} * {padding: 0;margin: 0;}

随机推荐