Lange Spieker: verschil tussen versies

Uit De FNM-wiki
Naar navigatie springen Naar zoeken springen
← Oudere bewerkingNieuwere bewerking →
VisueelWikitekst
Geen bewerkingssamenvatting
Geen bewerkingssamenvatting
Regel 1: Regel 1:
<html lang="en">
<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>


<html>
  <script>
<script>
    const canvas = document.getElementById("birdCanvas");
var canvas = document.createElement('canvas');
    const ctx = canvas.getContext("2d");


canvas.id = "CursorLayer";
    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();


var body = document.getElementsByTagName("body")[0];
      // Body
body.appendChild(canvas);
      ctx.beginPath();
      ctx.fillStyle = "#ffcc00";
      ctx.ellipse(0, -30, 30, 45, 0, 0, Math.PI * 2);
      ctx.fill();


cursorLayer = document.getElementById("CursorLayer");
      // Neck
      ctx.beginPath();
      ctx.fillStyle = "#ffcc00";
      ctx.fillRect(-5, -90, 10, 30);


var ctx = canvas.getContext("2d");
      // Head
ctx.fillStyle = "rgba(255, 0, 0, 0.2)";
      ctx.beginPath();
ctx.fillRect(100, 100, 200, 200);
      ctx.fillStyle = "#ffcc00";
ctx.fillStyle = "rgba(0, 255, 0, 0.2)";
      ctx.arc(0, -100, 15, 0, Math.PI * 2);
ctx.fillRect(150, 150, 200, 200);
      ctx.fill();
ctx.fillStyle = "rgba(0, 0, 255, 0.2)";
 
ctx.fillRect(200, 50, 200, 200);
      // Eye
</script>
      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>
</html>

Versie van 31 jul 2025 20:02

Lange Spieker Bird

Overgenomen van "https://wiki.fietsennaarmaastricht.nl/index.php?title=Lange_Spieker&oldid=1900"