HTML5, JavaScript e disegno di più rettangoli in una tela

Perché i miei rettangoli multipli non disegneranno nell'area di disegno?HTML5, JavaScript e disegno di più rettangoli in una tela

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <title></title> 
    <script src="Scripts/jquery-1.9.1.min.js"></script> 
    </head> 
    <body> 
    <canvas id="myCanvas" width="500" height="500" style="border:1px solid red"> 
     <p>Your browser doesn't support canvas.</p> 
    </canvas> 
    </body> 
</html> 

<script type ="text/javascript"> 
    function Shape(x, y, w, h, fill) { 
    this.x = x; 
    this.y = y; 
    this.w = w; 
    this.h = h; 
    this.fill = fill; 
    } 

    // get canvas element. 
    var elem = document.getElementById('myCanvas'); 

    // check if context exist 
    if (elem.getContext) { 

    var myRect = []; 

    myRect.push(new Shape(10, 0, 25, 25, "#333")) 
    myRect.push(new Shape(0, 40, 39, 25, "#333")) 
    myRect.push(new Shape(0, 80, 100, 25, "#333")) 

    context = elem.getContext('2d'); 
    for (i in myRect) { 

     //console.log(x); 

     context.fillRect(i.x, i.y, i.w, i.h) 
    } 
    //// x, y, width, height 
    //context.fillRect(0, 0, 50, 50); 

    //// x, y, width, height  
    //context.fillRect(75, 0, 50, 50); 
    } 
</script>

Grazie per l'aiuto.

fonte

2013-03-05 Hello-World

io prendo uno sguardo al vostro codice in un secondo, ma volevo solo farvi sapere che il plugin jQuery per jCanvas semplifica il disegno sulla tela molto. Potresti dare un'occhiata a questo. :) –

cool grazie. Sto cercando di imparare questa cosa html5 quindi questo è di grande aiuto. –

Ok, quindi eri quasi arrivato. Quando si esegue l'iterazione intorno alla matrice di rettangoli, si sta eseguendo l'iterazione sulla serie e non sugli oggetti stessi (vedere How to Loop through plain JavaScript object with objects as members?). Inoltre, come indicato da @jimjimmy1995, è necessario impostare il riempimento utilizzando .fillStyle come. fillRect non ha un parametro di riempimento.

Questo codice funzionerà:

function Shape(x, y, w, h, fill) { 
    this.x = x; 
    this.y = y; 
    this.w = w; 
    this.h = h; 
    this.fill = fill; 
} 

// get canvas element. 
var elem = document.getElementById('myCanvas'); 

// check if context exist 
if (elem.getContext) { 

    var myRect = []; 

    myRect.push(new Shape(10, 0, 25, 25, "#333")); 
    myRect.push(new Shape(0, 40, 39, 25, "#333")); 
    myRect.push(new Shape(0, 80, 100, 25, "#333")); 

    context = elem.getContext('2d'); 
    for (var i in myRect) { 
     oRec = myRect[i]; 
     context.fillStyle = oRec.fill; 
     context.fillRect(oRec.x, oRec.y, oRec.w, oRec.h); 

    } 

}

fonte

2013-03-05 09:52:10 Raad

Non è necessario dargli il colore di riempimento?

context.fillStyle = i.fill; 
context.fillRect(i.x,i.y,i.w,i.h);

fonte

2013-03-05 09:35:55

Sì, hai ragione - ma questo non è il problema principale - c'è un problema con il recupero dei valori dell'array nel loop. – Raad

Sembra che manchi qualche terminatore di linea. Stai riscontrando errori? –

grazie ........................... –

HTML5, JavaScript e disegno di più rettangoli in una tela

risposta

Problemi correlati