0
Schritt 1 löschen: Zeichnen Sie ein Segment auf LeinwandCanvas HTML5 und jquery, Inhalt
Schritt 2: Löschen Sie den Inhalt der Leinwand mit:
ctx.clearRect(0, 0, canvas.width, canvas.height);
Schritt 3: Die Werte x1 ändern, y1 und x2, y2 und zeichne ein neues Segment.
Problem: Es zeichnet sogar das gelöschte Segment neu?
Hier ist mein Code:
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
$("#Cancella").click(function() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
});
$("#Esegui").click(function() {
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var $x1 = $('[name="x1"]').val();
var $y1 = $('[name="y1"]').val();
var $x2 = $('[name="x2"]').val();
var $y2 = $('[name="y2"]').val();
ctx.moveTo($x1, $y1);
ctx.lineTo($x2, $y1);
ctx.stroke();
});
});
</script>
</head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000;"></canvas>
<p>x1:
<input name="x1" type="text" id="x1" value="10"> y1:
<input name="y1" type="text" id="y1" value="20">
</p>
<p>x2:
<input name="x2" type="text" id="x2" value="30"> y2:
<input name="y2" type="text" id="y2" value="40">
</p>
<p>
<input type="submit" name="Esegui" id="Esegui" value="Esegui">
<input type="submit" name="Cancella" id="Cancella" value="Cancella">
</p>
</body>
</html>
Ich hoffe, ich half Ihnen Rep wurde hinzugefügt und entfernt: / –