HTML Canvas Bezier curve segment

Description

HTML Canvas Bezier curve segment

View in separate window 

<!DOCTYPE HTML>
<html>
<head>
<script>
  // SUMMARY: Draws a multi segment curves on a canvas.

  window.onload = function() {//from  ww w .j  av  a2s  .  c om

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

    // CURVES.
    //        xS   yS   xC1  yC1  xC2  yC2  xE   yE   color
    //        ---- ---- ---- ---- ---- ---- ---- ---- -------
    drawCurve(15, 15, 150, 50, 50, 50, 100, 130, "red");
    drawCurve(100, 100, 175, 175, 75, 175, 190, 190, "yellow");
    drawCurve(15, 50, 100, 50, 50, 100, 60, 125, "blue");
    drawCurve(60, 125, 175, 175, 75, 175, 80, 10, "black");
    drawCurve(175, 25, 100, 50, 75, 100, 150, 100, "purple");
    drawCurve(150, 10, 200, 125, 100, 175, 190, 150, "pink");
  }
  // DRAW CURVE function.
  function drawCurve(xStart, yStart, xControl1, yControl1, xControl2,
      yControl2, xEnd, yEnd, color) {
    // ATTRIBUTES.
    context.strokeStyle = color;
    context.lineWidth = 9;
    context.lineCap = "round"
    context.shadowOffsetX = 3;
    context.shadowOffsetY = 3;
    context.shadowBlur = 5;
    context.shadowColor = "gray";

    // STARTING point.
    context.beginPath();
    context.moveTo(xStart, yStart);

    // BEZIER curve.
    context.bezierCurveTo(xControl1, yControl1, xControl2, yControl2, xEnd,
        yEnd);
    // DRAW curve.
    context.stroke();
  }
</script>
</head>
<body>
  <div style="width: 200px; height: 200px; margin: 0 auto; padding: 5px;">
    <canvas id="canvasArea" width="200" height="200"
      style="border: 2px solid black">
Your browser doesn't currently support HTML5 Canvas.
</canvas>
  </div>
</body>
</html>



PreviousNext

Related