Question

在浏览stripe.com网站时[请参阅此page，示例图片如下]，引起我注意的一件事是他们使用HTML 5画布进行svg模式绘制的方法。

我注意到圆形图案（橙色）有点像我们通常看到的那样在它的画布中平铺。在这种模式排列中有一定的自由度（不是css变换，例如倾斜的外观，而是组成模式本身的各个圆圈），在某种程度上，圆圈似乎随机地定位在画布中但从未达到其极限。 / p>

通过尝试texture.js，可以实现类似的模式模型，但是尽管效果很好，但它会产生常见的“平铺”风格。

我做了一个例子Pen。使用texture.js和额外的css转换或js函数可以实现这样的效果吗？

<div class="pattern">
    <div id="myCanvas" class="pattern-circles"></div>
</div>

<script type="text/javascript">
var w = '100%',
  h = '100%';

// The svg element
var svg = d3.select("#myCanvas")
  .append("svg")
  .attr("width", w)
  .attr("height", h);


// the texture
var t = textures.circles()
    //.thinner()
    .radius(4)
    .stroke("Orange")
    .fill("transparent")
    .strokeWidth(2);


svg.call(t);

// Creat the shape to add fill
svg.append("rect")
  .attr({
    "x": 0,
    "y": 0,
    "width": "1200",
    "height": "1200",
    "rx": 0,
    "ry": 0
  })
  .style({
    "fill": t.url(),
  });
</script>

Answer 1

不确定这是否是您所追求的，但创建这样的模式并不是一件非常困难的事情。在这里快速摆动，您可以调整radius和space来调整＆＃34;密度＆＃34;模式：

＆＃13;

<!DOCTYPE html>
<html>

  <head>
    <script data-require="d3@4.0.0" data-semver="4.0.0" src="https://d3js.org/d3.v4.min.js"></script>
  </head>

  <body>
    <script>
    
      var w = 500,
          h = 500;
      
      var svg = d3.select('body')
        .append('svg')
        .attr('width', w)
        .attr('height', h);
        
      var p = svg.append('defs')
        .append('pattern')
        .attr('id', 'chaos')
        .attr('patternUnits', 'userSpaceOnUse')
        .attr('width', w)
        .attr('height', h);
        
      var space = 20,
          radius = 5,
          col = 1,
          row = 1;
          
      for (var i = 0; i < 1000; i++){
        
        var cx = (col * space) + (Math.random() * radius + space),
            cy = (row * space) + (Math.random() * radius + space);
            
        col += 1;
        
        if (cy > (h - space)) {
          break;
        }
        
        if (cx > (w - space)) {
          
          col = 1;
          row += 1
          
        } else {
          
          p.append('circle')
            .style('stroke', 'orange')
            .style('fill', 'none')
            .attr('r', radius)
            .attr('cx', cx)
            .attr('cy', cy);
        }
      }
        
      svg.append('rect')
        .attr('width', w)
        .attr('height', h)
        .style('fill', 'url(#chaos)')
        .style('stroke', 'steelblue');

      
    </script>
  </body>

</html>

＆＃13;

SVG / HTML 5画布 - 圆圈图案位移，stripe.com方法

1 个答案: