|
|
| (18 tussenliggende versies door 2 gebruikers niet weergegeven) |
| Regel 1: |
Regel 1: |
| | | {{Sjabloon:Lange spieker}} |
| h
| |
| h
| |
| h
| |
| h
| |
| h
| |
| h
| |
| h
| |
| h
| |
| | |
| <html>
| |
| <head>
| |
| <style>
| |
| body, html {
| |
| margin: 0;
| |
| padding: 0;
| |
| }
| |
| #birdCanvas {
| |
| position: absolute;
| |
| top: 0;
| |
| left: 0;
| |
| pointer-events: none; /* So it doesn't block clicks */
| |
| z-index: -1; /* So it's behind other elements */
| |
| }
| |
| </style>
| |
| </head>
| |
| <body>
| |
| <canvas id="birdCanvas" width="500" height="500"></canvas>
| |
| | |
| <script>
| |
| const canvas = document.getElementById("birdCanvas");
| |
| const ctx = canvas.getContext("2d");
| |
| | |
| function drawLangeSpieker(x, y) {
| |
| ctx.save();
| |
| ctx.translate(x, y);
| |
| | |
| // Legs
| |
| ctx.strokeStyle = "#654321";
| |
| ctx.lineWidth = 4;
| |
| ctx.beginPath();
| |
| ctx.moveTo(0, 0);
| |
| ctx.lineTo(-10, 80);
| |
| ctx.moveTo(0, 0);
| |
| ctx.lineTo(10, 80);
| |
| ctx.stroke();
| |
| | |
| // Body
| |
| ctx.beginPath();
| |
| ctx.fillStyle = "#ffcc00";
| |
| ctx.ellipse(0, -30, 30, 45, 0, 0, Math.PI * 2);
| |
| ctx.fill();
| |
| | |
| // Neck
| |
| ctx.fillRect(-5, -90, 10, 30);
| |
| | |
| // Head
| |
| ctx.beginPath();
| |
| ctx.arc(0, -100, 15, 0, Math.PI * 2);
| |
| ctx.fill();
| |
| | |
| // Eye
| |
| ctx.beginPath();
| |
| ctx.fillStyle = "#000";
| |
| ctx.arc(5, -105, 2.5, 0, Math.PI * 2);
| |
| ctx.fill();
| |
| | |
| // Beak
| |
| ctx.beginPath();
| |
| ctx.fillStyle = "#ff6600";
| |
| ctx.moveTo(15, -100);
| |
| ctx.lineTo(35, -95);
| |
| ctx.lineTo(15, -90);
| |
| ctx.closePath();
| |
| ctx.fill();
| |
| | |
| // Wing
| |
| ctx.beginPath();
| |
| ctx.fillStyle = "#ffaa00";
| |
| ctx.ellipse(-15, -35, 12, 25, Math.PI / 6, 0, Math.PI * 2);
| |
| ctx.fill();
| |
| | |
| ctx.restore();
| |
| }
| |
| | |
| drawLangeSpieker(250, 300);
| |
| </script>
| |
| </body>
| |
| </html>
| |