Zoomare con click su immagine in canvas

**Sherlockkina** · 01-09-2017, 15:35

Salve a tutti, ho un problema con lo zoom in canvas.
Ho creato un cerchio e devo fare in modo che i click all'interno del cerchio ingrandiscano (del doppio) o rimpiccoliscano (della metà) il cerchio. Con "ClickOnBall" sono riuscita a rilevare i click ma non riesco a mettere un comando per zoomare. Potete aiutarmi per favore? Questo è il codice

codice:

<script type="text/javascript">
function init()
{
var canvas=document.getElementById("MyCanvas");
var context=canvas.getContext("2d");
context.beginPath();
var raggio=document.getElementById("raggio");
raggio=parseFloat('0' + raggio.value);
context.arc(200, 220, raggio*10, 0, 2*Math.PI, false);
context.closePath();
context.font="28px Arial";
context.fillStyle="#006600";
context.fillText("Radius:" + raggio*10, 25, 50);
context.fillStyle='#006600';
context.fill();
context.lineWidth="5";
context.strokeStyle="#003300";
context.stroke();
}
</script>
<script>
function clickOnBall()
{
alert("Hai cliccato");

}
</script>

**ciro78** · 01-09-2017, 20:07

ciao posta tutto il codice

**Sherlockkina** · 01-09-2017, 20:33

Originariamente inviata da ciro78

ciao posta tutto il codice

codice:

<!DOCTYPE html>
<html lang="it">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">


		<title>Progetto</title>
		<meta name="description" content="Codice html5 con il Canvas">
		<meta name="generator" content="Aptana Studio 3"/>
		<meta name="viewport" content="width=device-width; initial-scale=1.0">


		<link rel="shortcut icon" href="/favicon.ico">
		<link rel="apple-touch-icon" href="/apple-touch-icon.png">
	</head>


	<body>
		<header>
			<h2>Progetto</h2>
			<h4>
				Uso dell'elemento Canvas/SVG e funzioni javascript in HTML5.<br />
				Inserisce il numero di lettere che compongono il tuo cognome e clicca sul
				bottone "Draw Ball".
			</h4>
		</header>
		<canvas id="MyCanvas" width="600px" height="400px" onclick="clickOnBall()">
        	Canvas di html5 non supportato dal browser.
        </canvas>
        <script type="text/javascript">
        	function init()
        	{
	        	var canvas=document.getElementById("MyCanvas");
	        	var context=canvas.getContext("2d");
	        	context.beginPath();
	        	var raggio=document.getElementById("raggio");
	        	raggio=parseFloat('0' + raggio.value);
	 			context.arc(200, 220, raggio*10, 0, 2*Math.PI, false);
	 			context.closePath();
	 			context.font="28px Arial";
	        	context.fillStyle="#006600";
	        	context.fillText("Radius:" + raggio*10, 25, 50);
				context.fillStyle='#006600';
	 			context.fill();
	 			context.lineWidth="5";
	 			context.strokeStyle="#003300";
	 			context.stroke();
 			}
        </script>
        <script>
        	function clickOnBall()
        	{
        		alert("Hai cliccato");
        		
        	}
        </script>
        <form>
        	<input type="button" onclick="init();" value="Draw Ball"/>
        	<input type="number" id="raggio" value="10"/>
        </form>
	</body>
</html>

**ciro78** · 02-09-2017, 17:46

codice:

function clickOnBall()
            {
				var raggio = document.getElementById("raggio");
				raggio.value = raggio.value*2;
				init();
                alert("Hai cliccato");
                
            }

questo raddoppia

**Sherlockkina** · 02-09-2017, 18:32

Perfeeetto, grazie mille dell'aiuto!!

**ciro78** · 02-09-2017, 18:36

Originariamente inviata da Sherlockkina

Perfeeetto, grazie mille dell'aiuto!!

Discussione: Zoomare con click su immagine in canvas

Strumenti discussione

Ricerca discussione

Visualizza

Zoomare con click su immagine in canvas

Ecco il codice completo

Tag per questa discussione

Permessi di invio