HTML5 Game - Creating multiple curves

  1. HOME
  2. HTML5 Game
  3. Canvas Shape
  4. Shape from curve

Description

Creating multiple curves

Demo

ResultView the demo in separate window 

<!doctype html>  
   <html>  
    <head>  
     <style>canvas{border:1px solid red;}</style>  
    </head>  
    <body>  
     <canvas id="canvas" width="400" height="400"></canvas>  
     <script>  
     window.onload = function () {  
       let canvas = document.getElementById('canvas'),  
           context = canvas.getContext('2d'),  
           points = [],  /*  ww w  .j av  a  2s  .c om*/
           numPoints = 9,  
           ctrlPoint = {};  
     
       for (let i = 0; i < numPoints; i++) {  
         points.push({  
           x : Math.random() * canvas.width,  
           y : Math.random() * canvas.height  
         });  
       }  
     
       //move to the first point  
       context.beginPath();  
       context.moveTo(points[0].x, points[1].y);  
     
       //curve through the rest, stopping at each midpoint  
    for (i = 1; i < numPoints - 2; i++) {  
      ctrlPoint.x = (points[i].x + points[i+1].x) / 2;  
      ctrlPoint.y = (points[i].y + points[i+1].y) / 2;  
      context.quadraticCurveTo(points[i].x, points[i].y, ctrlPoint.x, ctrlPoint.y);  
    }  
  
    //curve through the last two points  
    context.quadraticCurveTo(points[i].x, points[i].y, points[i+1].x, points[i+1].y);  
    context.stroke();  
  };  
  </script>  
 </body>  
</html>

Related Topic