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

Canvas e shadowOffsetX / shadowOffsetY

Newsgroups	it.comp.lang.javascript
From	"leonardo.1+++" <leonardo.1@fastwebnet.it>
Subject	Canvas e shadowOffsetX / shadowOffsetY
Message-ID	<4gIqz.48221$pt.29639@tornado.fastwebnet.it> (permalink)
Date	2016-08-10 18:04 +0200

Show all headers | View raw

Come mai quando passo da shadowOffsetX e shadowOffsetY e viceversa 
funziona solo la prima volta?
Questo il codice con i veri tentativi che ho fatto per risolvere il 
problema.
Grazie a chi potrà darmi lumi.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento senza titolo</title>
<script type="text/javascript" 
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>

<script>
       $(document).ready(function() {
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
/***********************************************/
ctx.shadowBlur=25;
ctx.shadowOffsetX=40;
ctx.shadowColor="black";
ctx.fillStyle="green";
ctx.fillRect(25,25,180,150);
   /****************************************/
   $("#Cancella").click(function(){
ctx.clearRect(0, 0, canvas.width, canvas.height);
   });
   $("#Esegui").click(function(){ // alert("fatto click sul Esegui");
     var $Ombra = $('[name="Ombra"]').val(); alert("Ombra"+$Ombra);
   var $Colore1 = $('[name="Colore1"]').val(); alert($Colore1);
   var $Colore2 = $('[name="Colore2"]').val(); alert($Colore2);
     var $shadowOffset = $('[name="shadowOffset"]').val(); 
alert("shadowOffset="+$shadowOffset);
/* rettangolo 1 */
   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.clearRect(0, 0, canvas.width, canvas.height);
  ctx.beginPath(); // vuota buffer
   ctx.shadowBlur=$Ombra;
   if($shadowOffset == 1){
   ctx.shadowOffsetX=40;alert("shadowOffset="+$shadowOffset)
   }
   else
   {ctx.shadowOffsetY=40;alert("shadowOffset="+$shadowOffset)};
   //ctx.shadowOffsetY=40
   ctx.shadowColor=$Colore1;
ctx.fillStyle=$Colore2;
ctx.fillRect($X1,$Y1,$X2,$Y2);
/***********************************************/
   });
       });
     </script>

</head>

<body>
<p><strong><span 
style="font-size:1.29em">shadowOffset(x-y)</span></strong></p>
<p><canvas height="300" id="canvas" width="400"> </canvas></p>

<p>&nbsp;ctx.beginPath(); <br>
ctx.shadowBlur=<input class="InputNumero" id="Ombra" name="Ombra" 
type="text" value="25">;// dimensione ombra, livello di sfocatura<br>
<select class="classeSELECT" name="shadowOffset"><option 
value="1">ctx.shadowOffsetX</option><option 
value="2">ctx.shadowOffsetY</option></select>=40;<br>
ctx.shadowColor="<select class="classeSELECT" name="Colore1"><option 
value="black">black</option><option value="green">green</option><option 
value="red">red</option><option value="blue">blue</option></select>"; // 
colore ombra<br>
ctx.fillStyle="<select class="classeSELECT" name="Colore2"><option 
value="green">green</option><option value="red">red</option><option 
value="blue">blue</option></select>";// colore della figura<br>
ctx.fillRect(<input class="InputNumero" id="X1" name="X1" type="text" 
value="25">,<input class="InputNumero" id="Y1" name="Y1" type="text" 
value="25">,<input class="InputNumero" id="X2" name="X2" type="text" 
value="180">,<input class="InputNumero" id="Y2" name="Y2" type="text" 
value="150">);// disegna figura</p>
<p><input id="Esegui" type="button" value="Esegui"><input id="Cancella" 
type="button" value="Cancella"></p>
<p>&nbsp;</p>

</body>
</html>
-- 
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 | Find similar

Thread

Canvas e shadowOffsetX / shadowOffsetY "leonardo.1+++" <leonardo.1@fastwebnet.it> - 2016-08-10 18:04 +0200

csiph-web