Статья по теме:
Демо JavaScript:
// инициализация канваса var canvas = document.getElementById("cvs"); var ctx = canvas.getContext("2d"); // координаты х, у и радиус function hexagon(x, y, r) { ctx.save(); ctx.translate(x, y); var angle = 0; // угол многоугольника — 60 градусов // рассчитывается по формуле п/3 for(var i = 0; i < 6; i ++) { ctx.lineTo(Math.cos(angle) * r, Math.sin(angle) * r); angle += Math.PI / 3; } ctx.closePath(); ctx.restore(); } // устанавливаем радиус 50 var radius = 50; // насколько далеко мы хотим разместить каждую строку // делаем по формуле sin(п/3) * r var ydelta = Math.sin(Math.PI / 3) * radius; var even = true; // двойной цикл для у и х for(var y = 100; y < 700; y += ydelta) { ctx.save(); if(even) { ctx.translate(radius * 1.5, 0); } // внутри рисуем шестиугольники for(var x = 100; x < 700; x += radius * 3) { ctx.beginPath(); hexagon(x, y, radius); ctx.stroke(); } ctx.restore(); even = !even; }
Прикрепленный файл | Размер |
---|---|
hexagon.zip | 4.21 кб |