溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇“如何用JavaScript Canvas繪制六邊形網(wǎng)格”文章的知識(shí)點(diǎn)大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價(jià)值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來(lái)看看這篇“如何用JavaScript Canvas繪制六邊形網(wǎng)格”文章吧。
使用Canvas繪制六邊形網(wǎng)格。
主要思路是先畫(huà)給定中心點(diǎn)的六邊形，然后二重循環(huán)遍歷所有中心點(diǎn)，畫(huà)所有的六邊形。
<!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='畫(huà)布寬'+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>效果如下：
更新：增加了一些選項(xiàng)，邊長(zhǎng)和顏色可以設(shè)置。網(wǎng)頁(yè)的圖標(biāo)也用六邊形畫(huà)出。
<!DOCTYPE HTML>
<html>
<head>
<title>六邊形網(wǎng)格</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>設(shè)置大六邊形邊長(zhǎng): <input id='bc1' value="3" onchange="generate()"> 小六邊形<br>
設(shè)置小六邊形邊長(zhǎng): <input id='bc2' value="24" onchange="generate()"> 像素(px)<br>
設(shè)置背景色 <input type="color" id="bj" value="#c8ffff" onchange="generate()"/>
設(shè)置線條色 <input type="color" id="xt" value="#0000ff" onchange="generate()"/>
設(shè)置填充色 <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('六邊形個(gè)數(shù)過(guò)多時(shí)網(wǎng)頁(yè)會(huì)卡，是否繼續(xù)？');
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='畫(huà)布寬'+canvas.width+'px,高'+canvas.height+'px,含有'+count+'個(gè)小六邊形';
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>效果如下：
以上就是關(guān)于“如何用JavaScript Canvas繪制六邊形網(wǎng)格”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對(duì)大家有幫助，若想了解更多相關(guān)的知識(shí)內(nèi)容，請(qǐng)關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼