Случайные вырезки с холстом HTML5

Question

Все, что я пытаюсь сделать, это получить случайные вырезы (разные фигуры) с помощью элемента HTML Canvas.

На странице У меня есть DIV, а над ним у меня есть элемент холста. До сих пор мне удалось раскрасить элемент и вырезать первую часть (не случайную), а затем стереть/очистить холст, но когда я пытаюсь сделать то же самое несколько раз, это не сработает:/

Вот наполовину рабочий пример: 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 затем наполнить холст черного цвета в начале 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>