HTML Canvas Circle semi circle

Description

HTML Canvas Circle semi circle

View in separate window 

<!DOCTYPE HTML>
<html>
<head>
<script>
  // SUMMARY: Draws two semicircle arcs on a canvas.

  window.onload = function() {//from   w w w.j av a2 s  . co  m

    canvas = document.getElementById("canvasArea");
    context = canvas.getContext("2d");

    // ARCS.
    //      x    y   rad sAng eAng antiC  line    fill
    //      ---- --- --- ---- ---- -----  ------  -------
    drawArc(60, 15, 40, 0, 180, false, "aqua", "yellow");
    drawArc(150, 70, 60, 0, 100, true, "green", "white");
    drawArc(250, 15, 50, 350, 170, false, "red", "pink");
    drawArc(360, 60, 50, 350, 20, true, "blue", "purple");

    // DRAW arc function.
    function drawArc(xPos, yPos, radius, startAngle, endAngle,
        anticlockwise, lineColor, fillColor) {
      // ANGLES in radians.
      let startAngle = startAngle * (Math.PI / 180);
      let endAngle = endAngle * (Math.PI / 180);

      // ATTRIBUTES.
      context.strokeStyle = lineColor;
      context.fillStyle = fillColor;
      context.lineWidth = 8;

      // SHAPE.
      context.beginPath();
      context.arc(xPos, yPos, radius, startAngle, endAngle,
              anticlockwise);
      context.fill();
      context.stroke();
    }
  }
</script>
</head>
<body>
  <div style="width: 440px; height: 140px; margin: 0 auto; padding: 5px;">
    <canvas id="canvasArea" width="440" height="140"
      style="border: 2px solid black">
Your browser doesn't currently support HTML5 Canvas.
</canvas>
  </div>
</body>
</html>



PreviousNext

Related