vollständig
gekürzt
<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <title>JSL181 Canvas</title> <style> #meinCanvas {border: 1px solid gray;} </style> </head> <body> <canvas id="meinCanvas" height="300" width="600"> Dein Browser unterstützt keine Canvas!</canvas> <script> var leinwand = document.getElementById("meinCanvas"); var rahmen = leinwand.getContext('2d'); rahmen.strokeStyle = "green"; // Definiert die Rahmenfarbe rahmen.lineWidth = "5"; // Definiert die Rahmenbreite (5 Pixel) rahmen.rect(30, 100, 200, 80); rahmen.stroke(); // Zeichnet das Rechteck. rahmen.fillStyle = "#FF0000"; // Roter Hintergrund rahmen.fill(); // Füllmethode var verlauf = rahmen.createLinearGradient(0, 0, 0, 300); verlauf.addColorStop(0, "blue"); verlauf.addColorStop(1, "red"); rahmen.fillStyle = verlauf; // rahmen.fill(); </script> <noscript></noscript> </body> </html>
