An interactive demonstration of d3-voronoi rendered to Canvas. Compare to SVG.
forked from mbostock's block: Canvas Voronoi
| license: gpl-3.0 |
An interactive demonstration of d3-voronoi rendered to Canvas. Compare to SVG.
forked from mbostock's block: Canvas Voronoi
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <canvas width="960" height="500"></canvas> | |
| <script src="https://d3js.org/d3.v4.min.js"></script> | |
| <script> | |
| var canvas = d3.select("canvas").on("touchmove mousemove", moved).node(), | |
| context = canvas.getContext("2d"), | |
| width = canvas.width, | |
| height = canvas.height; | |
| var sites = d3.range(100) | |
| .map(function(d) { return [Math.random() * width, Math.random() * height]; }); | |
| var voronoi = d3.voronoi() | |
| .extent([[-1, -1], [width + 1, height + 1]]); | |
| redraw(); | |
| function moved() { | |
| sites[0] = d3.mouse(this); | |
| redraw(); | |
| } | |
| function redraw() { | |
| var diagram = voronoi(sites), | |
| links = diagram.links(), | |
| polygons = diagram.polygons(); | |
| context.clearRect(0, 0, width, height); | |
| context.beginPath(); | |
| drawCell(polygons[0]); | |
| context.fillStyle = "#f00"; | |
| context.fill(); | |
| context.beginPath(); | |
| for (var i = 0, n = polygons.length; i < n; ++i) drawCell(polygons[i]); | |
| context.strokeStyle = "#000"; | |
| context.stroke(); | |
| context.beginPath(); | |
| for (var i = 0, n = links.length; i < n; ++i) drawLink(links[i]); | |
| context.strokeStyle = "rgba(0,0,0,0.2)"; | |
| context.stroke(); | |
| context.beginPath(); | |
| drawSite(sites[0]); | |
| context.fillStyle = "#fff"; | |
| context.fill(); | |
| context.beginPath(); | |
| for (var i = 1, n = sites.length; i < n; ++i) drawSite(sites[i]); | |
| context.fillStyle = "#000"; | |
| context.fill(); | |
| context.strokeStyle = "#fff"; | |
| context.stroke(); | |
| } | |
| function drawSite(site) { | |
| context.moveTo(site[0] + 2.5, site[1]); | |
| context.arc(site[0], site[1], 2.5, 0, 2 * Math.PI, false); | |
| } | |
| function drawLink(link) { | |
| console.log(link); | |
| context.moveTo(link.source[0], link.source[1]); | |
| context.lineTo(link.target[0], link.target[1]); | |
| } | |
| function drawCell(cell) { | |
| if (!cell) return false; | |
| context.moveTo(cell[0][0], cell[0][1]); | |
| for (var j = 1, m = cell.length; j < m; ++j) { | |
| context.lineTo(cell[j][0], cell[j][1]); | |
| } | |
| context.closePath(); | |
| return true; | |
| } | |
| </script> |
| �PNG | |