Veröffentlicht 14. Juli 201114 j 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]
Archiv
Dieses Thema wurde archiviert und kann nicht mehr beantwortet werden.