html canvas绘制网格,canvas如何绘制n个相切的蜂窝网格

Title

window.onload = function () {

const canvas = document.getElementsByTagName('canvas')[0]

const ctx = canvas.getContext("2d");

const w = document.documentElement.clientWidth;

const h = document.documentElement.clientHeight;

canvas.width = w;

canvas.height = h;

let mols = []

function init() {

let mol = new generate_mol(1)

mols.push(mol);

}

function draw(){

canvas.width = canvas.width;

for(var i=0;i

var m = mols[i];

m.draw();

}

}

function generate_mol(mol) {

this.x = w*0.3;

this.y = h*0.3;

// this.vx = Math.random()*-2;

// this.vy = Math.random()*2;

// this.vr = 0.1;

this.r = Math.random()*Math.PI;

this.draw = function() {

// ctx.save();

// ctx.translate(this.x + 20, this.y + 80);

// ctx.rotate(Math.PI * 0.17);

// ctx.translate(-this.x + 20, -this.y - 80);

// ctx.beginPath();

// ctx.moveTo(this.x, this.y + 30);

// ctx.lineTo(this.x - 26, this.y + 45);

// ctx.lineTo(this.x - 26, this.y + 75);

// ctx.lineTo(this.x, this.y + 90);

// ctx.lineTo(this.x + 26, this.y + 75);

// ctx.lineTo(this.x + 26, this.y + 45);

// ctx.lineTo(this.x, this.y + 30);

// ctx.moveTo(this.x - 20, this.y + 47);

// ctx.strokeStyle = "rgba(0,0,0,0.2)";

// ctx.lineWidth = 3;

// ctx.stroke();

// ctx.closePath();

// ctx.restore()

ctx.fillStyle = "rgba(0,0,0,0.5)";

ctx.font = "15px Arial";

ctx.fillText("A", this.x+40 , this.y+80);

ctx.save();

ctx.translate(this.x + 20, this.y + 30);

ctx.rotate(Math.PI * 0.17);

ctx.translate(-this.x + 20, -this.y - 80);

ctx.beginPath();

ctx.moveTo(this.x, this.y + 30);

ctx.lineTo(this.x - 26, this.y + 45);

ctx.lineTo(this.x - 26, this.y + 75);

ctx.lineTo(this.x, this.y + 90);

ctx.lineTo(this.x + 26, this.y + 75);

ctx.lineTo(this.x + 26, this.y + 45);

ctx.lineTo(this.x, this.y + 30);

ctx.moveTo(this.x - 20, this.y + 47);

ctx.strokeStyle = "rgba(0,0,0,0.2)";

ctx.lineWidth = 3;

ctx.stroke();

ctx.fillStyle = "rgba(0,0,0,0.5)";

ctx.font = "15px Arial";

ctx.fillText("B", this.x , this.y+70);

ctx.closePath();

ctx.restore()

ctx.save();

ctx.translate(this.x + 68, this.y + 56);

ctx.rotate(Math.PI * 0.17);

ctx.translate(-this.x + 20, -this.y - 80);

ctx.beginPath();

ctx.moveTo(this.x, this.y + 30);

ctx.lineTo(this.x - 26, this.y + 45);

ctx.lineTo(this.x - 26, this.y + 75);

ctx.lineTo(this.x, this.y + 90);

ctx.lineTo(this.x + 26, this.y + 75);

ctx.lineTo(this.x + 26, this.y + 45);

ctx.lineTo(this.x, this.y + 30);

ctx.moveTo(this.x - 20, this.y + 47);

ctx.strokeStyle = "rgba(0,0,0,0.2)";

ctx.lineWidth = 3;

ctx.stroke();

ctx.closePath();

ctx.restore()

ctx.save();

ctx.translate(this.x + 66, this.y + 110);

ctx.rotate(Math.PI * 0.17);

ctx.translate(-this.x + 20, -this.y - 80);

ctx.beginPath();

ctx.moveTo(this.x, this.y + 30);

ctx.lineTo(this.x - 26, this.y + 45);

ctx.lineTo(this.x - 26, this.y + 75);

ctx.lineTo(this.x, this.y + 90);

ctx.lineTo(this.x + 26, this.y + 75);

ctx.lineTo(this.x + 26, this.y + 45);

ctx.lineTo(this.x, this.y + 30);

ctx.moveTo(this.x - 20, this.y + 47);

ctx.strokeStyle = "rgba(0,0,0,0.2)";

ctx.lineWidth = 3;

ctx.stroke();

ctx.closePath();

ctx.restore()

ctx.save();

ctx.translate(this.x + 20, this.y + 135);

ctx.rotate(Math.PI * 0.17);

ctx.translate(-this.x + 20, -this.y - 80);

ctx.beginPath();

ctx.moveTo(this.x, this.y + 30);

ctx.lineTo(this.x - 26, this.y + 45);

ctx.lineTo(this.x - 26, this.y + 75);

ctx.lineTo(this.x, this.y + 90);

ctx.lineTo(this.x + 26, this.y + 75);

ctx.lineTo(this.x + 26, this.y + 45);

ctx.lineTo(this.x, this.y + 30);

ctx.moveTo(this.x - 20, this.y + 47);

ctx.strokeStyle = "rgba(0,0,0,0.2)";

ctx.lineWidth = 3;

ctx.stroke();

ctx.closePath();

ctx.restore()

//

ctx.save();

ctx.translate(this.x -27,this.y + 108);

ctx.rotate(Math.PI * 0.17);

ctx.translate(-this.x + 20, -this.y - 80);

ctx.beginPath();

ctx.moveTo(this.x, this.y + 30);

ctx.lineTo(this.x - 26, this.y + 45);

ctx.lineTo(this.x - 26, this.y + 75);

ctx.lineTo(this.x, this.y + 90);

ctx.lineTo(this.x + 26, this.y + 75);

ctx.lineTo(this.x + 26, this.y + 45);

ctx.lineTo(this.x, this.y + 30);

ctx.moveTo(this.x - 20, this.y + 47);

ctx.strokeStyle = "rgba(0,0,0,0.2)";

ctx.lineWidth = 3;

ctx.stroke();

ctx.closePath();

ctx.restore()

ctx.save();

ctx.translate(this.x -26, this.y + 56);

ctx.rotate(Math.PI * 0.17);

ctx.translate(-this.x + 20, -this.y - 80);

ctx.beginPath();

ctx.moveTo(this.x, this.y + 30);

ctx.lineTo(this.x - 26, this.y + 45);

ctx.lineTo(this.x - 26, this.y + 75);

ctx.lineTo(this.x, this.y + 90);

ctx.lineTo(this.x + 26, this.y + 75);

ctx.lineTo(this.x + 26, this.y + 45);

ctx.lineTo(this.x, this.y + 30);

ctx.moveTo(this.x - 20, this.y + 47);

ctx.strokeStyle = "rgba(0,0,0,0.2)";

ctx.lineWidth = 3;

ctx.stroke();

ctx.closePath();

ctx.restore()

}

}

init()

draw()

}

没画好 画偏了

应该还要加算法 来生成指定个数的

预览地址