La frequenza di ripetizione della funzione di ridisegno del canvas è impostata molto lenta per avere agio di vedere le modifiche dei valori, nella textarea i bytes visti dal rettangolino-spia, nel DIV sottostante il valore del byte di colore che si vuole esplorare e il numero che stabilisce la direzione del movimento.
<!DOCTYPE html>
<html>
<script src="funzioniCanvas.js"></script>
<script>
var x=245;
var dx=1;
var delta=1;
var y=50;
var w=100;
var h=10;
var sfondo="black";
var colore="green";
var osx=350;
var osy=50;
var osw=1;
var osh=100;
var oscolore="#FFFF00";
var immagine;
function init(){
initContext("canvas");
intervallo=setInterval(draw,1000);
}
function draw(){
rect(0,0,WIDTH,HEIGHT,sfondo);
rect(x,y,w,h,colore);
rect(osx,osy,osw,osh, oscolore);
immagine=ctx.getImageData(x+w,y,1,h);
$("testo").value="";
for(var n=0;n<immagine.data.length;n+=4){
$("testo").value+=immagine.data[n]+" "+immagine.data[n+1]+" "+immagine.data[n+2]+" "+immagine.data[n+3]+"\n";
if(immagine.data[n]==255) delta=-1;
$("delta").innerHTML=immagine.data[n]+ " " +delta;
}
x+=delta;
}
window.addEventListener("load",init);
</script>
<body>
<canvas id="canvas" width=500 height=500></canvas>
<textarea id="testo" style="float:right;height:500px""></textarea>
<div id="delta"></div>
</body>
</html>
Nessun commento:
Posta un commento