Question

我想做的就是通过HTML Canvas元素获得随机剪裁（不同的形状）。

在页面上我有一个DIV，在它上面我有canvas元素。到目前为止，我能够对元素进行着色并剪下第一块（不是随机的），然后再次擦拭/清洁画布，但是当我试图多次完成同样的事情时，它就不会这样做了。工作：/

以下是半工作示例：http://plnkr.co/edit/a5UAutd2jNgHMTtPMsp4

    var cutThatOut = function(coords) {

      ctx.fillStyle = "rgba(0,0,0,1)";
      ctx.globalCompositeOperation = "destination-out";

      coords.forEach(function(coord, i){
        if (i==0) {
          ctx.moveTo(coord.x, coord.y);
        } else {
          ctx.lineTo(coord.x, coord.y);
        }
      });
      ctx.fill();
    }

感谢您的时间/帮助

Answer 1

几个修正：

使用ctx.beginPath启动新的路径命令集。否则，您之前的绘图命令集将与最新的设置一起重复。
确保在cutThatOut结束时重置合成。否则你的下一个fillRect（0,0，c.width，c.height）将“擦除”整个画布，因为它仍在使用'destination-out'。
如果你想在每次调用cutThatOut时做一个全新的剪裁，那么在剪切开始时用黑色填充画布

只需注意：您的随机坐标通常会导致多边形的相交边，并且通常会延伸到画布的边界之外。

这是示例代码和演示：

var c = document.getElementById("canvas");
var ctx = c.getContext('2d');

var cutThatOut = function(coords) {

  ctx.fillStyle = "black";
  ctx.fillRect(0,0,c.width, c.height);

  ctx.fillStyle = "rgba(0,0,0,1)";
  ctx.globalCompositeOperation = "destination-out";

  ctx.beginPath();
  coords.forEach(function(coord, i){
    if (i==0) {
      ctx.moveTo(coord.x, coord.y);
    } else {
      ctx.lineTo(coord.x, coord.y);
    }
  });
  ctx.fill();

  ctx.globalCompositeOperation = "source-over";

}

var wipeIt = function() {
  ctx.clearRect(0,0,c.width,c.height);
}

var getRand = function(min, max) {return Math.round(Math.random() * (max - min) + min);}

cutThatOut([
  {x:c.width/2, y:0},
  {x:c.width,y:c.height/2},
  {x:c.width/2,y:c.height},
  {x:0, y:c.height/2}
]);

$("#btn").on("click", function(){
  wipeIt();
  cutThatOut([
    {x:getRand(1,200), y:getRand(1,200)},
    {x:getRand(1,200), y:getRand(1,200)},
    {x:getRand(1,200), y:getRand(1,200)},
    {x:getRand(1,200), y:getRand(1,200)}
  ]);
});

body{ background-color: ivory; padding:10px; }
#canvas{border:1px solid red;}
.adiv {
  width: 200px;
  height: 200px;
  background-color: yellow;
  position: relative;
}
#canvas {
  width: 200px;
  height: 200px;
  position:absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="adiv">
  <canvas id="canvas"></canvas>
</div>
<p>
  <button id="btn">NEXT!</button>
</p>

使用HTML5 Canvas随机剪裁

1 个答案: