Drawing Canvas non funzionante

**Francoiky** · 14-06-2011, 20:42

Salve a tutti! Cercando di capire come funzioni il nuovo HTML5 mi sono imbattuto in un problema: queste poche righe di codice non funzionano e non capisco il perché. Qualcuno può aiutarmi?

codice:

<!DOCKTYPE html>
<html>
<head>
<script type="text/javascript">
var canvas;
var mouseDown = 0;
var context;
var mouseX;
var mouseY;
function drawRect()
{
if (mouseDown == 1)
	{
	canvas = document.getElementById("canvas");
	context = canvas.getContext("2d");
	context.fillRect(mouseX,mouseY,10,10);
	}
}
function getMousePosition(event)
{
mouseX = event.screenX;
mouseY = event.screenY;
}
</script>
</head>
<body style="background-color: grey;">
<center>
<canvas id="canvas" style="width: 80%;height: 97%;border-style: ridge;" onmousedown="mouseDown = 1;" onmouseup="mouseDown = 0;" onmousemove="getMousePosition(event); drawRect();"></canvas>
<center>
</body>
</html>

Grazie in anticpo.

**Blake1992** · 15-06-2011, 13:31

codice:

<!DOCKTYPE html>
<html>
<head>
<script type="text/javascript">
var canvas;
var mouseDown = 0;
var context;
var mouseX;
var mouseY;
function drawRect()
{
if (mouseDown == 1)
	{
	canvas = document.getElementById("canvas");
	context = canvas.getContext("2d");
	context.fillRect(mouseX,mouseY,10,10);
	}
}
function getMousePosition(event)
{
	if (mouseDown == 1)
	{
	mouseX = event.offsetX;
	mouseY = event.offsetY;
	drawRect();
	}
}
initCanvas = function(){ 
  canvas = document.getElementById("canvas");
  context = canvas.getContext("2d");
  context.width = context.width;
  context.canvas.addEventListener('mousedown' , function() { mouseDown = 1; },false );
  context.canvas.addEventListener('mousemove' , getMousePosition ,false );
  context.canvas.addEventListener('mouseup' ,   function() { mouseDown = 0; } ,false );
  context.canvas.addEventListener('mouseleave' ,   function() { mouseDown = 0; } ,false );
} 
</script>
</head>
<body style="background-color: grey;" onload='initCanvas()'>
<center>
<canvas id="canvas" style="width: 80%;height: 97%;border-style: ridge"></canvas>
<center>
</body>
</html>

Così scrive... però su chrome i quadrati risultano spostati... non so se sia un errore generico o solo di chrome quindi fammi sapere come va =)

**Francoiky** · 15-06-2011, 14:50

I quadrati risultano spostati perché in:

codice:

context.fillRect(mouseX,mouseY,10,10)

dovrebbe essere *(mouseX - 5, mouseY - 5, 10, 10). Il codice non l'ho "ottimizzato", era solo per provare.

P.S.: mi spieghi questo passaggio?

codice:

initCanvas = function(){ 
  canvas = document.getElementById("canvas");
  context = canvas.getContext("2d");
  context.width = context.width;
  context.canvas.addEventListener('mousedown' , function() { mouseDown = 1; },false );
  context.canvas.addEventListener('mousemove' , getMousePosition ,false );
  context.canvas.addEventListener('mouseup' ,   function() { mouseDown = 0; } ,false );
  context.canvas.addEventListener('mouseleave' ,   function() { mouseDown = 0; } ,false );
}

Comunque, grazie

EDIT:
non avevo capito in che senso "spostati"

Questo succede perchè non ho regolato il rapporto tra le coordinate del mouse (che sono rispetto allo schermo) e quelle del quadrato da disegnare nel canvas (che sono rispetto al canvas stesso). Come detto prima il codice è solo di prova... una volta riuscito a farlo funzionare sarei passato ad ottimizzarlo.

**Blake1992** · 15-06-2011, 15:17

Iniziando dalle cose semplici:

codice:

context.width = context.width;

serve a svuotare il canvas nel caso ci fosse qualcosa sopra.

codice:

context.canvas.addEventListener('mousedown' , function() { mouseDown = 1; },false );
  context.canvas.addEventListener('mousemove' , getMousePosition ,false );
  context.canvas.addEventListener('mouseup' ,   function() { mouseDown = 0; } ,false );
  context.canvas.addEventListener('mouseleave' ,   function() { mouseDown = 0; } ,false );

Questi sono degli EventListener. A dire il vero li ho scoperti ieri pure io ma sono molto simili a quelli di ActionScript3.
Quello che fanno è richiamare una funzione al verificarsi di un determinato evento.
La sintassi è questa:
object.addEventListener (NomeEvento, function, useCapture);
NomeEvento è un identificativo per il tipo di evento che ti interessa (es: 'mousedown', 'click' etc)
Function è la funzione che viene richiamata al verificarsi dell'evento. Se non vengono specificati parametri viene passato l'evento.
useCapture è un valore Booleano che spacifica se l'evento debba essere catturato o no. Personalmente lo metto sempre a false

Se avessi bisogno di chiamare una funzione passando l'evento più altri parametri usa:
object.addEventListener ('event', function (e) { NomeFunzione(e, par1, par2);}, false);

Probabilemente non è il modo migliore ma funziona

EDIT: non avevo capito in che senso "spostati" Questo succede perchè non ho regolato il rapporto tra le coordinate del mouse (che sono rispetto allo schermo) e quelle del quadrato da disegnare nel canvas (che sono rispetto al canvas stesso). Come detto prima il codice è solo di prova... una volta riuscito a farlo funzionare sarei passato ad ottimizzarlo.

Non è quello... lo avevo pensato anch'io ma non c'entra. Comunque lo spostamento aumenta costantemente man mano che ci sia allontana dall'origine (0,0). Se scopri quella costante basta che fai:

codice:

MouseX = MouseX * costante;

Per trovare la costante fai un rapporto fra la X ipotetica e la X reale.
e lo stesso per la Y. Dovrebbe funzionare

**fcaldera** · 15-06-2011, 15:22

attenzione: doctype, non "docktype"

Discussione: Drawing Canvas non funzionante

Strumenti discussione

Ricerca discussione

Visualizza

Drawing Canvas non funzionante

Permessi di invio