HTML / CSS / JS中的幾何圖案

Question

我一直面臨使用HTML / CSS / JS重新創建下面的圖像而不使用任何img文件的挑戰。 我當時以為可以用CSS制作形狀，但是我知道這可能是最愚蠢的方法。

你們有沒有建議如何解決這個問題？ 也許是HTML5畫布？ 我看到圖案由兩層組成，一層是三角形，頂層是圓形。 如果我想隨機生成三角形和圓形，該如何處理？

謝謝

Answer 1

您絕對可以通過使用canvas元素來實現這一點，但是您是否考慮過使用d3.js ？

D3.js是一個能夠基於數據處理文檔的庫。 由於圖片中的所有元素在笛卡爾坐標系中都有確切的位置，因此您只需要提供數據，然后將元素附加到文檔中就很簡單了。

通過使用每個元素的確切坐標，您可以非常精確。 看一下摘要，我相信您會明白的。 D3選擇操作元素的方式與jQuery非常相似，因此，如果您熟悉jQuery，您會喜歡D3js。

希望這可以幫助你。

 var margin = { top: 50, right: 50, bottom: 50, left: 50}, w = 300 - margin.left - margin.right, h = 600 - margin.top - margin.bottom, circleRadii = 15, triData = [{x: 20, y: 30}, {x: 50, y: 120}, {x: 140, y: 160}], circleData = [{x: 10, y: 10}, {x: 40, y: 80}, {x: 160, y: 70}]; var svg = d3.select("body") .append("svg") .attr("width", w + margin.left + margin.right) .attr("height", h + margin.left + margin.right) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); var tri = svg.selectAll(".point") .data(triData) .enter().append("path") .attr("class", "point") .attr("stroke", "none") .attr("fill", "rgba(30,110,160,.5)") .attr("d", d3.svg.symbol().type("triangle-up").size(1024*2)) .attr("transform", function(d) { return "translate(" + dx + "," + dy + ")"; }); var circles = svg.selectAll("circle") .data(circleData) .enter() .append("circle"); var circleAttr = circles .attr("cx", function (d) { return dx; }) .attr("cy", function (d) { return dy; }) .attr("r", circleRadii) .style("fill", "rgba(10,100,0,.5)"); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>