make a trapezoid looking shape with canvas - Javascript Canvas

Javascript examples for Canvas:Shape

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

Description

make a trapezoid looking shape with 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>

body{ background-color: ivory; }
canvas{border:1px solid red;}

      </style> 
      <script>
$(function(){//from w  w  w  .j a v a  2s  .co  m
    // canvas references
    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");
    // the centerpoint of the arc-trapezoid
    var cx=150;
    var cy=150;
    // the inside and outside radii
    var insideRadius=60;
    var outsideRadius=100;
    // the beginning and ending angles
    var beginningAngle=Math.PI*5/4;
    var endingAngle=Math.PI*7/4;

    var x=cx+insideRadius*Math.cos(endingAngle);
    var y=cy+insideRadius*Math.sin(endingAngle);

    ctx.strokeStyle="red";
    ctx.lineWidth=2;
    // begin the path
    ctx.beginPath();
    ctx.arc(cx,cy,outsideRadius,beginningAngle,endingAngle);
    ctx.lineTo(x,y);
    ctx.arc(cx,cy,insideRadius,endingAngle,beginningAngle,true);
    ctx.closePath();
    ctx.stroke();
}); // end $(function(){});

      </script> 
   </head> 
   <body> 
      <canvas id="canvas" width="300" height="300"></canvas>  
   </body>
</html>

Related Tutorials