HTML5 Game - Draw random path

  1. HOME
  2. HTML5 Game
  3. Canvas Shape
  4. Random Shape

Description

Draw random path

Demo

ResultView the demo in separate window 

<!doctype html>
<html lang="en">
<body>
<div style="position: absolute; top: 50px; left: 50px;">
<canvas id="canvas" width="500" height="500">
 Your browser does not support the HTML 5 Canvas. 
</canvas>//w  w w  .  j  a  v a2 s .  c  o  m
<script type="text/javascript">
  let theCanvas = document.getElementById('canvas');
    let context = theCanvas.getContext('2d');

    context.beginPath();   
    context.moveTo(400,400);
    let currentX = 400;
    let currentY = 400;
    for (let i = 0; i < 10000; i++) {
        let r = Math.random();
        if (r < 0.25) {
            currentX = currentX-3;
        } else if (r < 0.5) {
            currentX = currentX+3;
        } else if (r < 0.75) {
            currentY = currentY - 3;
        } else {
            currentY = currentY + 3;
        }
        context.lineTo(currentX, currentY);
    }
    context.stroke();
  
</script> 

</div>
</body>
</html>

Related Topic