SELF-Treffen in Mannheim 2025

SELFHTML wird 30 Jahre alt!
Die Mitgliederversammlung findet am 24.05.2025 um 10:00 statt. Alle Mitglieder und Interessierte sind herzlich eingeladen.
Davor und danach gibt es Gelegenheiten zum gemütlichen Beisammensein. → Veranstaltungs-Ankündigung.

Beispiel:JS-canvas-muster.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche 
<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0;" />
  <link rel="stylesheet" media="screen" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css" />
  <title>Kachelung mit createPattern</title>
  <style>
    canvas {background:white; border:1px solid #333;}  
  </style>	
  <script>
'use strict';
document.addEventListener('DOMContentLoaded', function () {


  function draw() {
    var canvas  = document.getElementById('canvas');
    var context = canvas.getContext('2d');

    context.clearRect(0, 0, canvas.width, canvas.height); 
    var image = document.getElementById('vorlage');
    var muster = context.createPattern(image,'repeat');
    context.rect(0, 0, 500, 300);
    context.fillStyle = muster;
    context.fill();
  }
			
  draw();

});  
 
  </script>
</head>
  <body>
  <h1>Kachelung mit createPattern</h1>
 
  <main>
    <canvas id="canvas" width="500" height="300">Beispiel für eine Kachelung eines Musters in Canvas.</canvas>
    <p>Rastergrafik, die als Kachel verwendet wird.</p>
    <img id="vorlage" src="https://wiki.selfhtml.org/images/f/f3/Kachel-hexagon.png" alt="Muster">
  </main>
  
</body>
</html>
Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:JS-canvas-muster.html&oldid=55669“