Uživatel:Dean/Pískoviště/arrow.js

Poznámka: Po zveřejnění musíte vyprázdnit cache vašeho prohlížeče, jinak změny neuvidíte.

Firefox / Safari: Při kliknutí na Aktualizovat držte Shift nebo stiskněte Ctrl-F5 nebo Ctrl-R (na Macu ⌘-R)
Google Chrome: Stiskněte Ctrl-Shift-R (na Macu ⌘-Shift-R)
Internet Explorer / Edge: Při kliknutí na Aktualizovat držte Ctrl nebo stiskněte Ctrl-F5
Opera: Stiskněte Ctrl-F5.

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="500" height="500" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>

<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

// Function to draw an arrow
function drawArrow(angle) {
    ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear the canvas
    ctx.save(); // Save the current state
    ctx.translate(canvas.width / 2, canvas.height / 2); // Move the origin to the center
    ctx.rotate(angle * Math.PI / 180); // Rotate the canvas by the input angle

    // Draw the arrow
    ctx.beginPath();
    ctx.moveTo(0, 0);
    ctx.lineTo(100, 0);
    ctx.lineTo(90, -10);
    ctx.moveTo(100, 0);
    ctx.lineTo(90, 10);
    ctx.stroke();

    ctx.restore(); // Restore the state
}

// Call the function with the desired angle
drawArrow(45); // Replace 45 with your desired angle
</script>

</body>
</html>