vollständig
gekürzt
<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <title>JSL182 Canvas Pfade</title> <style></style> </head> <body> <canvas id="meinCanvas" width="300" height="300"> Canvas wird nicht unterstützt!</canvas> <script> var leinwand = document.getElementById("meinCanvas"); var meinPfad = leinwand.getContext("2d"); meinPfad.beginPath(); // Pfad wird gestartet meinPfad.lineWidth = "5"; // Breite des Pfad in Pixel meinPfad.strokeStyle = "green"; // Farbe des Pfad (Grün) meinPfad.moveTo(10, 10); // Referenzpunkt/Startpunkt meinPfad.lineTo(140, 140); // Erstes Ziel meinPfad.lineTo(290, 10); // Zweites Ziel meinPfad.closePath(); // zurück zum Referenzpunkt meinPfad.stroke(); // Pfad wird gezeichnet meinPfad.fillStyle = "red"; meinPfad.fill(); alert(meinPfad.isPointInPath(150, 60)); </script> </body> </html>
