Drawing Shapes along a curved path in canvas - Javascript Canvas

Javascript examples for Canvas:Shape

  1. HOME
  2. Javascript
  3. Canvas
  4. Shape

Description

Drawing Shapes along a curved path in canvas

Demo Code

ResultView the demo in separate window 

<!doctype html>
<html>
   <head> 
      <!-- reset css --> 
      <script type="text/javascript" src="https://code.jquery.com/jquery.min.js"></script> 
      <style>

canvas{border:1px solid red;}

      </style> 
      <script>
$(function(){//from  w w  w .  j  a  va 2 s.co  m
    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");
    var startPoint={x:50,y:150};
    var controlPoint={x:125,y:20};
    var endPoint={x:200,y:150};
    ctx.beginPath();
    ctx.moveTo(startPoint.x,startPoint.y);
    ctx.quadraticCurveTo(controlPoint.x,controlPoint.y,endPoint.x,endPoint.y);
    ctx.stroke();
    for(var t=0;t<101;t+=5){
        var point=getQuadraticBezierXYatT(startPoint,controlPoint,endPoint,t/100);
        ctx.beginPath();
        ctx.arc(point.x,point.y,3,0,Math.PI*2);
        ctx.closePath();
        ctx.fillStyle=randomColor();
        ctx.fill();
    }
    function getQuadraticBezierXYatT(startPt,controlPt,endPt,T) {
        var x = Math.pow(1-T,2) * startPt.x + 2 * (1-T) * T * controlPt.x + Math.pow(T,2) * endPt.x;
        var y = Math.pow(1-T,2) * startPt.y + 2 * (1-T) * T * controlPt.y + Math.pow(T,2) * endPt.y;
        return( {x:x,y:y} );
    }
    function randomColor(){
        return('#'+Math.floor(Math.random()*16777215).toString(16));
    }
});

      </script> 
   </head> 
   <body> 
      <button id="test">Test</button>
      <br> 
      <canvas id="canvas" width="300" height="300"></canvas>  
   </body>
</html>

Related Tutorials