|
|
| (28 tussenliggende versies door 3 gebruikers niet weergegeven) |
| Regel 1: |
Regel 1: |
| <html lang="en">
| | {{Sjabloon:Lange spieker}} |
| <head>
| |
| <meta charset="UTF-8">
| |
| <title>Lange Spieker Bird</title>
| |
| <style>
| |
| canvas {
| |
| background-color: #cceeff;
| |
| display: block;
| |
| margin: 0 auto;
| |
| border: 2px solid #333;
| |
| }
| |
| </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.beginPath();
| |
| ctx.fillStyle = "#ffcc00";
| |
| ctx.fillRect(-5, -90, 10, 30);
| |
| | |
| // Head
| |
| ctx.beginPath();
| |
| ctx.fillStyle = "#ffcc00";
| |
| 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();
| |
| }
| |
| | |
| // Draw the bird in the center
| |
| drawLangeSpieker(250, 300);
| |
| </script>
| |
| </body>
| |
| </html>
| |