Groups > it.comp.lang.javascript > #8050

Canvas di HTML5, cancellazione contenuto

Path	csiph.com!news.fcku.it!bofh.it!tornado.fastwebnet.it!53ab2750!not-for-mail
Newsgroups	it.comp.lang.javascript
X-Mozilla-News-Host	news://news.fastwebnet.it:119
From	"leonardo.1+++" <leonardo.1@fastwebnet.it>
Subject	Canvas di HTML5, cancellazione contenuto
User-Agent	Mozilla/5.0 (Windows NT 10.0; WOW64; rv:45.0) Gecko/20100101 Thunderbird/45.2.0
MIME-Version	1.0
Content-Type	text/plain; charset=iso-8859-15; format=flowed
Content-Transfer-Encoding	8bit
Lines	74
Message-ID	<G8Imz.47842$pt.5792@tornado.fastwebnet.it> (permalink)
Date	Fri, 29 Jul 2016 14:40:05 +0200
NNTP-Posting-Host	2.236.249.115
X-Complaints-To	newsmaster@fastweb.it
X-Trace	tornado.fastwebnet.it 1469796006 2.236.249.115 (Fri, 29 Jul 2016 14:40:06 CEST)
NNTP-Posting-Date	Fri, 29 Jul 2016 14:40:06 CEST
Xref	csiph.com it.comp.lang.javascript:8050

Show key headers only | View raw

Fase 1: disegno un segmento sulla canvas
Fase 2: cancello il contenuto della canvas con:
ctx.clearRect(0, 0, canvas.width, canvas.height);
Fase 3: cambio i valori x1,y1 e x2,y2 e disegno nuovo segmento.
Problema:
perché disegna di nuovo anche il segmento precedentemente cancellato?
Questo il codice:
<!doctype html>
<html>
<head>

<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(){  // alert("fatto click sul Cancella");
  ctx.clearRect(0, 0, canvas.width, canvas.height);

   });

$("#Esegui").click(function(){// alert("fatto click sul Esegui");

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

var $x1 = $('[name="x1"]').val(); // alert($x1);
var $y1 = $('[name="y1"]').val();// alert($y1);

var $x2 = $('[name="x2"]').val();// alert($x2);
var $y2 = $('[name="y2"]').val();// alert($y2);

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>

Grazie a chi potrà darmi lumi.
Saluti


-- 
Non sono su facebook
Se anche tu vuoi cancellarti
http://www.giardiniblog.com/come-cancellarsi-da-facebook-eliminare-account/

Back to it.comp.lang.javascript | Previous | Next — Next in thread | Find similar

Thread

Canvas di HTML5, cancellazione contenuto "leonardo.1+++" <leonardo.1@fastwebnet.it> - 2016-07-29 14:40 +0200
  Re: Canvas di HTML5, cancellazione contenuto Alessandro Pellizzari <shuriken@amiran.it> - 2016-07-29 14:40 +0100
    Re: Canvas di HTML5, cancellazione contenuto "leonardo.1+++" <leonardo.1@fastwebnet.it> - 2016-07-29 16:33 +0200

csiph-web