JavaScript?Canvas绘制六边形网格

来源：jb51　　时间：2022/1/17 10:44:01　　对本文有异议

本文实例为大家分享了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>