Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • HML5 Canvas Curves

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 365
    Comment on it

    HML5 Canvas Curves

    1. Canvas Arc

    Creating Arc HTML5 Canvas, by using arc() method.

    HTML

    <canvas id="myCanvas1" width="578" height="250"></canvas>
    

    Script

    <script>
      var canvas = document.getElementById('myCanvas1');
      var context = canvas.getContext('2d');
      context.beginPath();
      context.arc(200, 100, 80, 1.1 * 3.14, 1.9 * 3.14, false);
      context.lineWidth = 15;
    
      // line color
      context.strokeStyle = 'black';
      context.stroke();
    </script>
    

    2. Quadratic Curve

    Creating a quadratic curve with HTML5 Canvas, by using the quadraticCurveTo() method.

    HTML

    <canvas id="myCanvas2" width="578" height="200"></canvas>
    

    Script

    <script>
    var canvas = document.getElementById('myCanvas2');
    var context = canvas.getContext('2d');
    
    context.beginPath();
    context.moveTo(188, 150);
    context.quadraticCurveTo(288, 0, 388, 150);
    context.lineWidth = 10;
    
    // line color
    context.strokeStyle = 'black';
    context.stroke();
    </script>
    

    3. Bezier Curve

    For creating a Bezier curve with HTML5 Canvas,by bezierCurveTo() method.

    HTML

    <canvas id="myCanvas3" width="578" height="200"></canvas>
    

    Script

    <script>
      var canvas = document.getElementById('myCanvas3');
      var context = canvas.getContext('2d');
    
      context.beginPath();
      context.moveTo(188, 130);
      context.bezierCurveTo(140, 10, 388, 10, 388, 170);
      context.lineWidth = 10;
    
      // line color
      context.strokeStyle = 'black';
      context.stroke();
    </script>
    

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: