Mockba Geschrieben 14. Juli 2011 Teilen Geschrieben 14. Juli 2011 Hallo Leute, um mir HTML5 näher zu bringen versuche ich mich zur Zeit an einer kleinen Web-App. Dabei habe ich eine Weltkarte und trage einige Locations mit Rechtecken ein. Nun versuche ich die Rechtecke per Button wieder zu Löschen nur komme ich dabei nicht weiter. Der Clear- Button funktioniert irgendwie nicht. Könnt ihr mir evtl weiterhelfen? Unwichtige Teile habe ich zu Übersichtlichkeit entfernt. Das Zeichnen auf das Canvas funktioniert soweit. <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>xy</title> <!-- Link to jQuery --> <script type="text/javascript" src="../jquery/jquery-1.6.js"></script> <script type="text/javascript"></script> <!-- Link to jQTouch --> <script type="text/javascript" src="../jqtouch/jqtouch/jqtouch.js"></script> <link type="text/css" rel="stylesheet" media="screen" href="../jqtouch/jqtouch/jqtouch.css"> <link type="text/css" rel="stylesheet" media="screen" href="../jqtouch/themes/jqt/theme.css"> <!-- Additional CSS--> <link rel="stylesheet" type="text/css" href="../css/app.css"> <!-- Load jQTouch --> <script type="text/javascript"> var jQT = $.jQTouch({}); </script> </head> <body onload="drawPIC();"> <div id="page-wrap"> <header> </header> <div class="toolbar"> <h1>xy</h1> <a href="../apps.html" class="button flip">back</a> </div> <section> <table id="table"> <tr>Tabelleninhalt </tr> <tr>Tabelleninhalt </tr> <tr> <td colspan="3"> <canvas id="map" width="200" height="100"> </canvas> </td> </tr> </table> <button onclick="clear();">Clear</button> </section> <footer> </footer> </div> <!-- Functions for drawing the Timezones --> <script type="application/x-javascript"> function drawPIC() { var ctx = document.getElementById('map').getContext('2d'); var img = new Image(); img.src = '../images/world.png'; ctx.drawImage(img,0,0); } var ctx = document.getElementById('map').getContext('2d'); function draw2() { ctx.beginPath(); ctx.strokeStyle = "#FFA500"; ctx.strokeRect(75,1,8,91); } function draw1() { ctx.beginPath(); ctx.strokeStyle = "#FFA500"; ctx.strokeRect(83,1,10,91); } function clear() { canvas = document.getElementById('map'); canvas.width = canvas.width; } </script> </body> </html>[/PHP] Zitieren Link zu diesem Kommentar Auf anderen Seiten teilen Mehr Optionen zum Teilen...
Empfohlene Beiträge
Dein Kommentar
Du kannst jetzt schreiben und Dich später registrieren. Wenn Du ein Konto hast, melde Dich jetzt an, um unter Deinem Benutzernamen zu schreiben.