HTML5 Game - Canvas Shape Draw Star

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

Description

Draw Star

Demo

ResultView the demo in separate window 

<!DOCTYPE html>
   <head>
      <style> 
         body {//from w w  w  .ja v a 2 s .  c  o m
            background: #dddddd;
         }

         #canvas {
            position: absolute;
            left: 0px;
            top: 0px;
            margin: 20px;
            background: #ffffff;
            border: thin solid #aaaaaa;
         }
      </style>
   </head>

  <body>
    <canvas id='canvas' width='500' height='500'>
      Canvas not supported
    </canvas>

    <script>
let context = document.querySelector('#canvas').getContext('2d');
let x=250;
let y = 250;
let innerRadius = 50;
let outerRadius = 100;
let numPoints = 15;
          context.beginPath();
          context.moveTo(x, y - outerRadius);
          for (let n = 1; n < numPoints * 2; n++) {
              let radius = n % 2 === 0 ? outerRadius : innerRadius;
              let pointX = radius * Math.sin((n * Math.PI) / numPoints) + x;
              let pointY = -1 * radius * Math.cos((n * Math.PI) / numPoints)+y;
              context.lineTo(pointX, pointY);
          }
          context.closePath();
          context.stroke();


      </script>
  </body>
</html>

Related Topic