function rect(x,y,w,h,colore){
ctx.fillStyle=colore;
ctx.beginPath();
ctx.rect(x,y,w,h);
ctx.closePath();
ctx.fill();
this.x=x;
this.y=y;
this.w=w;
this.h=h;
}
Così quando voglio disegnare un rettangolo sul canvas:
rettangolo=new rect(100,100,50,20,"dodgerblue"); alert(rettangolo.x);Che mi restituisce una messageBox con il valore 100.
Ancora:
function draw(){
rect(0,0,WIDTH,HEIGHT,sfondo);
rettangolo=new rect(100,100,50,20,"dodgerblue");
alert(rettangolo.x);
rettangolo2=new rect(50,150,200,10,"green");
alert("Area = "+rettangolo2.x*rettangolo2.y);
}
Ed ecco i successivi sviluppi...
<!DOCTYPE html>
<html>
<script src="funzioniCanvas.js"></script>
<script>
var sfondo;
var rettangolo;
var rettangolo2;
function init(){
initContext("canvas");
//istanziazione di rettangoli
sfondo=new rect(0,0,WIDTH,HEIGHT,"black");
rettangolo=new rect(100,100,50,20,"dodgerblue");
rettangolo2=new rect(50,150,200,10,"green");
intervallo=setInterval(draw,1);
}
function draw(){
sfondo.disegna();
rettangolo.disegna();
rettangolo2.disegna();
rettangolo2.y+=.1
rettangolo.x+=.1;
}
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>
Così ottengo anche il movimento dei rettangoli.
Essi vengono istanziati prima della funzione draw(), e vengono solo disegnati a ogni ripetizione della funzione.
Nessun commento:
Posta un commento