Zum Inhalt springen

Löschen einer Zeichnung auf Canvas mit Hintergrundbild


Empfohlene Beiträge

Geschrieben

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]

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 erstellen

Anmelden

Du hast bereits ein Benutzerkonto? Melde Dich hier an.

Jetzt anmelden

Fachinformatiker.de, 2024 by SE Internet Services

fidelogo_small.png

Schicke uns eine Nachricht!

Fachinformatiker.de ist die größte IT-Community
rund um Ausbildung, Job, Weiterbildung für IT-Fachkräfte.

Fachinformatiker.de App

Download on the App Store
Get it on Google Play

Kontakt

Hier werben?
Oder sende eine E-Mail an

Social media u. feeds

Jobboard für Fachinformatiker und IT-Fachkräfte

×
×
  • Neu erstellen...