如何用JavaScript Canvas绘制六边形网格

2023-06-26 06:06:50 555人浏览泡泡鱼

摘要

这篇“如何用javascript canvas绘制六边形网格”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“如何用J

这篇“如何用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>

效果如下：

如何用JavaScript Canvas绘制六边形网格

更新：增加了一些选项，边长和颜色可以设置。网页的图标也用六边形画出。

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

效果如下：

如何用JavaScript Canvas绘制六边形网格