HTML5 Game - Shape via curve

  1. HOME
  2. HTML5 Game
  3. Canvas Shape
  4. Shape from curve

Description

Shape via curve

Demo

ResultView the demo in separate window 

<!doctype html>
<html>
  <head>
    <title>Drawing a spaceship</title>
  </head>/*from  w w  w . j  a  v  a 2s.com*/
  <body>
    <h1>Drawing a spaceship</h1>
    <canvas id="balls" width="400" height="400"></canvas>
    <script>
let context = document.getElementById("balls").getContext("2d");

function draw_ship(ctx, radius, options) {
    let angle = 0.5 * Math.PI / 2;
    let curve1 = 0.25;
    let curve2 = 0.75;
    ctx.save();

    ctx.strokeStyle = "white";
    ctx.fillStyle = "rgba(0, 0, 0, 0.25)";
    ctx.lineWidth = 0.5;
    ctx.beginPath();
    ctx.arc(0, 0, radius, 0, 2 * Math.PI);
    ctx.stroke();
    ctx.fill();

    ctx.lineWidth = 2;
    ctx.strokeStyle = "white";
    ctx.fillStyle = "black";
    ctx.beginPath();
    ctx.moveTo(radius, 0);
    ctx.quadraticCurveTo(
        Math.cos(angle) * radius * curve2,
        Math.sin(angle) * radius * curve2,
        Math.cos(Math.PI - angle) * radius,
        Math.sin(Math.PI - angle) * radius
    );
    ctx.quadraticCurveTo(-radius * curve1, 0,
        Math.cos(Math.PI + angle) * radius,
        Math.sin(Math.PI + angle) * radius
    );
    ctx.quadraticCurveTo(
        Math.cos(-angle) * radius * curve2,
        Math.sin(-angle) * radius * curve2,
        radius, 0
    );
    ctx.fill();
    ctx.stroke();
    ctx.strokeStyle = "white";
    ctx.fillStyle = "white";
    ctx.lineWidth = 0.5;
    ctx.beginPath();
    ctx.moveTo(
        Math.cos(-angle) * radius,
        Math.sin(-angle) * radius
    );
    ctx.lineTo(0, 0);
    ctx.lineTo(
        Math.cos(angle) * radius,
        Math.sin(angle) * radius
    );
    ctx.moveTo(-radius, 0);
    ctx.lineTo(0, 0);
    ctx.stroke();
    ctx.beginPath();
    ctx.arc(
        Math.cos(angle) * radius * curve2,
        Math.sin(angle) * radius * curve2,
        radius / 40, 0, 2 * Math.PI
    );
    ctx.fill();
    ctx.beginPath();
    ctx.arc(
        Math.cos(-angle) * radius * curve2,
        Math.sin(-angle) * radius * curve2,
        radius / 40, 0, 2 * Math.PI
    );
    ctx.fill();
    ctx.beginPath();
    ctx.arc(radius * curve1 - radius, 0, radius / 50, 0, 2 * Math.PI);
    ctx.fill();

    ctx.restore();
}

context.translate(300, 300);
draw_ship(context, 100);
    </script>
  </body>
</html>

Related Topic