HTML / CSS / JS中的几何图案

Question

我一直在使用HTML / CSS / JS重新创建下面的图片而不使用任何img文件。我以为我可以用CSS和CSS制作形状，但我知道这可能是最愚蠢的方法。

你们有没有建议如何处理这个问题？也许是HTML5画布？我看到图案由两层组成，一层有三角形，顶层有圆圈。如果我想随机生成三角形和圆圈，我将如何处理？

由于

Answer 1

你绝对可以通过使用canvas元素来实现这一点，但是你有没有想过使用d3.js？

D3.js是一个能够根据数据操作文档的库。 由于图片中的所有元素在笛卡尔坐标系中都具有精确位置，因此您只需提供数据，然后将元素附加到文档中相当简单。

通过使用每个元素的精确坐标，您可以非常精确。看一下片段，我相信你会明白这个想法。选择操作元素的D3方式与jQuery非常相似，所以如果你熟悉jQuery，你会喜欢D3js。

希望这可以帮助你。

＆＃13;

＆＃13;

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(" + d.x + "," + d.y + ")"; });

var circles = svg.selectAll("circle")
                    .data(circleData)
                    .enter()
                    .append("circle");

var circleAttr = circles
                    .attr("cx", function (d) { return d.x; })
                    .attr("cy", function (d) { return d.y; })
                    .attr("r", circleRadii)
                    .style("fill", "rgba(10,100,0,.5)");

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;