Visualizzazione dei risultati da 1 a 5 su 5

Discussione: problema canvas

  1. #1
    Utente di HTML.it
    Registrato dal
    May 2008
    Messaggi
    23

    problema canvas

    salve a tutti.. stavo facendo qualche esercitazione sull'HTML 5..
    da un libro di testo ho preso questo esempio, ma non mi funziona proprio:S

    codice:
    <html> 
    <head> 
    <title>Smile></title>
     <script> function init() { 
    var ctx=document.getElementById("canvas").getContext('2d');
    ctx.beginPath(); 
    ctx.strokeStyle="rgb(200,0,0)"; cyt.arc(200, 200,500,0, Math.PI, false); 
    ctx.stroke(); 
    } 
    </script> 
    </head> 
    <body onLoad="init();"> 
    <canvas id="canvas" width="400" height="300"> 
    Your browser doesn't support the HTML5 element canvas. 
    </canvas> 
    </body> 
    </html>
    teoricamente dovrei disegnare un arco con la funzione canvas, ma non succede assolutamente nulla T.T

  2. #2
    Sinceramente ho modificato leggermente il tuo codice per renderlo più leggibile, ma devo dire che ci eri molto vicino! La prima cosa che ho dovuto veramente modificare è stato il raggio del tuo arco, troppo grande.

    codice:
    <html> 
    	<head> 
    		<title>Smile></title>
     		<script>
    			window.onload = function(){
    			    var canvas = document.getElementById("canvas");
    			    var context = canvas.getContext("2d");
    
    			    var centerX = 200;
    			    var centerY = 160;
    			    var radius = 50;
    			    var startingAngle = 0;
    			    var endingAngle = Math.PI;
    			    var counterclockwise = false;
    			    context.arc(centerX, centerY, radius, startingAngle, 
    			        endingAngle, counterclockwise);
    
    			    context.lineWidth = 15;
    			    context.strokeStyle = "rgb(200, 0, 0)"; // line color
    			    context.stroke();
    			};
    		</script> 
    	</head> 
    	<body> 
    		<canvas id="canvas" width="400" height="300"> 
    			Your browser doesn't support the HTML5 element canvas. 
    		</canvas> 
    	</body> 
    </html>
    Come puoi vedere ho anche tolto la funzione .beginPath(); che risulta essere del tutto opzionale, quindi se vuoi puoi anche lasciarlo, ma non cambierà assolutamente niente...
    WordPress AndMore - Apprendiamo WordPress Facilmente!

  3. #3
    Utente di HTML.it
    Registrato dal
    May 2008
    Messaggi
    23
    sisi, era proprio il raggio troppo grande il problema.. ora funziona, grazie mille^^
    invece continuando con le esercitazioni ho scritto un.. programmino che simula il gioco dei dadi.. funziona tutto bene senonchè.. ogni tanto uno dei "pallini" del secondo dado si sposta fuori dal dado, e non riesco assolutamente a capire perchè.. soprattutto perchè non succede sempre:S
    ecco tutto il codice

    codice:
    <html>
    <head>
    <title>Gioco dei Dadi - Craps</title>
    <script>
    		var cwidth=400;
    		var cheight=300;
    		var dicex=50;
    		var dicey=50;
    		var dicewidth=100;
    		var diceheight=100;
    		var dotrad=6;
    		var ctx;
    		var dx;
    		var dy;
    		var firstturn = true;
    		var point;
    function throwdice(){
    		var sum;
    		var ch = 1+Math.floor(Math.random()*6);
    		sum = ch;
    		dx = dicex;
    		dy = dicey;
    		drawface(ch);
    		dx = dicex + 150;
    		ch=1 + Math.floor(Math.random()*6);
    		sum += ch;
    		drawface(ch);
    		var bank = Number(document.f.bank.value);
    			if (bank<10){
    				alert("hai finito i soldi! Aggiungine altri e prova ancora.");
    				return;
    			}
    		bank = bank -10;
    			document.f.bank.value = String(bank);
    		if (firstturn){
    				switch(sum){
    						case 7:
    						case 11:
    							document.f.outcome.value="Hai Vinto!";
    							bank = Number(document.f.bank.value);
    							bank +=20;
    							document.f.bank.value = String (bank);
    							break;
    						case 2:
    						case 3:
    						case 12:
    							document.f.outcome.value="Hai Perso!";
    							break;
    						default:
    							point = sum;
    							document.f.pv.value=point;
    							firstturn = false;
    							document.f.stage.value="Ritira il Dado.";
    							document.f.outcome.value="     ";
    				}	
    		}
    		else{
    				switch(sum){
    						case point:
    							document.f.outcome.value="Hai Vinto!";
    							document.f.stage.value="Ricomincia dal Primo Lancio.";
    							document.f.pv.value="     ";
    							firstturn = true;
    							bank = Number(document.f.bank.value);
    							bank +=20;
    							document.f.bank.value = String (bank);
    							break;
    						case 7:
    							document.f.outcome.value="Hai Perso!";
    							document.f.stage.value="Ricomincia dal Primo Lancio.";
    							document.f.pv.value="     ";
    							firstturn = true;
    				}			
    		}					
    }							
    function drawface(n){
    	 ctx=document.getElementById('canvas').getContext('2d');
    	 ctx.lineWidth=5;
    	 ctx.clearRect(dx,dy,dicewidth,diceheight);
    	 ctx.strokeRect(dx,dy,dicewidth,diceheight);
    	 var dotx;
    	 var doty;
    	 ctx.fillStyle="#009966";
    		switch(n){
    				case 1:
    					draw1();
    					break;
    				case 2:
    					draw2();
    					break;
    				case 3:
    					draw2();
    					draw1();
    					break;
    				case 4:
    					draw4();
    					break;
    				case 5:	
    					draw4();
    					draw1();
    					break;
    				case 6:	
    					draw4();
    					draw2mid();
    					break;
    		}
    }
    function draw1(){
    		var dotx;
    		var doty;
    		ctx.beginPath();
    		dotx = dx + .5*dicewidth;
    		doty = dy + .5*diceheight;
    		ctx.arc(dotx,doty,dotrad,0,Math.PI*2,true);
    		ctx.closePath();
    		ctx.fill();
    }
    function draw2(){
    		var dotx;
    		var doty;
    		ctx.beginPath();
    		dotx = dx + 3*dotrad;
    		doty = dy + 3*dotrad;
    		ctx.arc(dotx,doty,dotrad,0,Math.PI*2,true);
    		dotx = dx+dicewidth-3*dotrad;
    		doty = dx+diceheight-3*dotrad;
    		ctx.arc(dotx,doty,dotrad,0,Math.PI*2,true);
    		ctx.closePath();
    		ctx.fill();
    }		
    function draw4(){
    		var dotx;
    		var doty;
    		ctx.beginPath();
    		dotx = dx + 3*dotrad;
    		doty = dy + 3*dotrad;
    		ctx.arc(dotx,doty,dotrad,0,Math.PI*2,true);
    		dotx = dx+dicewidth-3*dotrad;
    		doty = dy+diceheight-3*dotrad;
    		ctx.arc(dotx,doty,dotrad,0,Math.PI*2,true);
    		ctx.closePath();
    		ctx.fill();
    		ctx.beginPath();
    		dotx = dx + 3*dotrad;
    		doty = dy + diceheight-3*dotrad;// no change
    		ctx.arc(dotx,doty,dotrad,0,Math.PI*2,true);
    		dotx = dx+dicewidth-3*dotrad;
    		doty = dy+3*dotrad;
    		ctx.arc(dotx,doty,dotrad,0,Math.PI*2,true);
    		ctx.closePath();
    		ctx.fill();
    }	
    function draw2mid(){
    		var dotx;
    		var doty;
    		ctx.beginPath();
    		dotx = dx + 3*dotrad;
    		doty = dy + .5*diceheight;
    		ctx.arc(dotx,doty,dotrad,0,Math.PI*2,true);
    		dotx = dx+dicewidth-3*dotrad;
    		doty = dy + .5*diceheight; //no change
    		ctx.arc(dotx,doty,dotrad,0,Math.PI*2,true);
    		ctx.closePath();
    		ctx.fill();
    }
    </script>
    </head>
    <body>
    <canvas id="canvas" width="400" height="300">
    Your browser doesn't support the HTML5 element canvas.
    </canvas>
    
    
    <button onClick="throwdice();">Tira i Dadi </button>
    <form name="f">
    Turno: <input name="stage" value="Primo Lancio"/>
    Punteggio: <input name="pv" value="                "/>
    Esito: <input name="outcome" value="                "/>
    Cassa: <input name="bank" value="100"/>
    </form>
    </body>
    </html>
    suggerimenti?

  4. #4
    succede solo quando nel secondo dado esce il numero tre o il due, il problema è nella funzione draw2 quindi. Prova a controllarla...
    ChromeOS.eu tutto su Chrome OS!
    HTML5 Answer Il 3D nel browser è arrivato! Sviluppa la tua app 3D per il browser!

  5. #5
    Utente di HTML.it
    Registrato dal
    May 2008
    Messaggi
    23
    problema risolto.. era in questo punto:

    codice:
    doty = dx+diceheight-3*dotrad;
    della funzione draw2, come dicevi te

    in realtà deve essere

    codice:
    doty = dy+diceheight-3*dotrad;
    solito errore di distrazione.. grazie mille^^

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2024 vBulletin Solutions, Inc. All rights reserved.