HTML5 Game - Canvas Shape Draw Arrow

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

Description

Draw Arrow

Demo

ResultView the demo in separate window 

<!DOCTYPE html>

<head>
    <style>
        body {//from   ww w  . j  a  va 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 ctx = document.querySelector('#canvas').getContext('2d');
        let x = 0;
        let y = 0;

        let x1 = 250;
        let y1 = 250;


        let PI2 = Math.PI * 2;

        let fromTension = 2;
        let dx, dy;
        dx = x1 - x;
        dy = y1 - y;

        let radians = (Math.atan2(dy, dx) + PI2) % PI2;
        let length = 20;
        let width = 20;
        ctx.save();
        ctx.beginPath();
        ctx.moveTo(x, y);
        ctx.lineTo(x1, y1);
        ctx.translate(x1, y1);
        ctx.rotate(radians);
        ctx.moveTo(x, y);
        ctx.lineTo(-length, width / 2);
        ctx.lineTo(-length, -width / 2);
        ctx.closePath();
        ctx.restore();

        ctx.stroke();
    </script>
</body>

</html>

Related Topic