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

Canvas di HTML5, cancellazione contenuto

Started by	"leonardo.1+++" <leonardo.1@fastwebnet.it>
First post	2016-07-29 14:40 +0200
Last post	2016-07-29 16:33 +0200
Articles	3 — 2 participants

Back to article view | Back to it.comp.lang.javascript

  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

#8050 — Canvas di HTML5, cancellazione contenuto

From	"leonardo.1+++" <leonardo.1@fastwebnet.it>
Date	2016-07-29 14:40 +0200
Subject	Canvas di HTML5, cancellazione contenuto
Message-ID	<G8Imz.47842$pt.5792@tornado.fastwebnet.it>

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/

[toc] | [next] | [standalone]

#8051

From	Alessandro Pellizzari <shuriken@amiran.it>
Date	2016-07-29 14:40 +0100
Message-ID	<e014mkFaqurU1@mid.individual.net>
In reply to	#8050

On 29/07/2016 13:40, leonardo.1+++ wrote:

> perché disegna di nuovo anche il segmento precedentemente cancellato?

> $(document).ready(function() {
>
> var canvas = document.getElementById("myCanvas");
> var ctx = canvas.getContext("2d");

Qui stai ottenendo un context

> $("#Cancella").click(function(){  // alert("fatto click sul Cancella");
>  ctx.clearRect(0, 0, canvas.width, canvas.height);

E qui lo usi.

>   });
>
> $("#Esegui").click(function(){// alert("fatto click sul Esegui");
>
> var canvas = document.getElementById("myCanvas");
> var ctx = canvas.getContext("2d");

Qui ne chiedi un altro. Puoi usare lo stesso che hai già creato fuori 
dalla funzione.

Ma non è qui il tuo problema, questa è solo "ottimizzazione". :)

> ctx.moveTo($x1,$y1);
> ctx.lineTo($x2,$y1);
> ctx.stroke();

Qui non stai svuotando il buffer dei segmenti.
Prima di fare il moveTo() devi chiamare beginPath() per svuotare il 
buffer, altrimenti ti ridisegna tutto ogni volta.

Bye.

[toc] | [prev] | [next] | [standalone]

#8052

From	"leonardo.1+++" <leonardo.1@fastwebnet.it>
Date	2016-07-29 16:33 +0200
Message-ID	<QOJmz.47847$pt.8740@tornado.fastwebnet.it>
In reply to	#8051

Il 29/07/2016 15:40, Alessandro Pellizzari ha scritto:
> On 29/07/2016 13:40, leonardo.1+++ wrote:
>
>> perché disegna di nuovo anche il segmento precedentemente cancellato?
>
>> $(document).ready(function() {
>>
>> var canvas = document.getElementById("myCanvas");
>> var ctx = canvas.getContext("2d");
>
> Qui stai ottenendo un context
>
>> $("#Cancella").click(function(){  // alert("fatto click sul Cancella");
>>  ctx.clearRect(0, 0, canvas.width, canvas.height);
>
> E qui lo usi.
>
>>   });
>>
>> $("#Esegui").click(function(){// alert("fatto click sul Esegui");
>>
>> var canvas = document.getElementById("myCanvas");
>> var ctx = canvas.getContext("2d");
>
> Qui ne chiedi un altro. Puoi usare lo stesso che hai già creato fuori
> dalla funzione.
>
> Ma non è qui il tuo problema, questa è solo "ottimizzazione". :)
>
>> ctx.moveTo($x1,$y1);
>> ctx.lineTo($x2,$y1);
>> ctx.stroke();
>
> Qui non stai svuotando il buffer dei segmenti.
> Prima di fare il moveTo() devi chiamare beginPath() per svuotare il
> buffer, altrimenti ti ridisegna tutto ogni volta.
>
> Bye.
>
>
Come sempre conciso ed esauriente.
Ti ringrazio
Leonardo



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

[toc] | [prev] | [standalone]

csiph-web

Canvas di HTML5, cancellazione contenuto

Contents

#8050 — Canvas di HTML5, cancellazione contenuto

#8051

#8052