Mockba Geschrieben 14. Juli 2011 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]
Empfohlene Beiträge
Erstelle ein Benutzerkonto oder melde Dich an, um zu kommentieren
Du musst ein Benutzerkonto haben, um einen Kommentar verfassen zu können
Benutzerkonto erstellen
Neues Benutzerkonto für unsere Community erstellen. Es ist einfach!
Neues Benutzerkonto erstellenAnmelden
Du hast bereits ein Benutzerkonto? Melde Dich hier an.
Jetzt anmelden