HTML5 Game - Multi-segment curves

  1. HOME
  2. HTML5 Game
  3. Canvas
  4. Bezier Curve

Description

Multi-segment curves

Demo

ResultView the demo in separate window 

<!DOCTYPE HTML>
<html>

<head>
    <script>
        window.onload = function() {
            canvas = document.getElementById("canvasArea");
            context = canvas.getContext("2d");

            //CURVES.
            //        xS   yS   xC1  yC1  xC2  yC2  xE   yE   color
            //        ---- ---- ---- ---- ---- ---- ---- ---- -------
            drawCurve(51, 15, 150, 50, 50, 50, 100, 100, "green");
            drawCurve(10, 100, 175, 175, 75, 175, 190, 190, "blue");
            drawCurve(115, 50, 100, 50, 50, 100, 60, 125, "red");
            drawCurve(160, 125, 175, 175, 75, 175, 80, 190, "orange");
            drawCurve(175, 25, 100, 50, 75, 100, 150, 100, "purple");
            drawCurve(150, 100, 200, 125, 100, 175, 190, 150, "pink");
        }/*  ww  w .  ja v a  2 s .  c o  m*/
        //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>

Related Topic