HTML5, Tuvalete birden fazla dikdörtgenin girilmesi ve çizilmesi

Neden birden çok dikdörtgenler tuvalde çizmiyor?HTML5, Tuvalete birden fazla dikdörtgenin girilmesi ve çizilmesi

<!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>

Yardımlarınız için teşekkür ederiz.

kaynak

2013-03-05 Hello-World

ben ikinci daki koda bir göz atacağız ama sadece jQuery için jCanvas eklentisi tuval çok üzerinde çizim basitleştiren bildirmek istedim:

Bu kod çalışacaktır. Bir göz atmak isteyebilirsiniz. :) –

harika teşekkürler. Bu html5 şeyini öğrenmeye çalışıyorum bu yüzden bu harika bir yardım. –

Tamam, bu yüzden neredeyse oradaydınız. Dikdörtgenler dizinizi yinelediğinizde, nesnelerin kendilerini değil anahtarını dizinin üzerinde yinelediniz (bkz. How to Loop through plain JavaScript object with objects as members?). Plus, @ jimjimmy1995'in işaret ettiği gibi, .fillStyle değerini kullanarak doldurmayı ayarlamanız gerekir. fillRect'un doldurma parametresi yok.

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); 

    } 

}

kaynak

2013-03-05 09:52:10 Raad

Doldurma rengini vermeniz gerekmez mi?

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

kaynak

2013-03-05 09:35:55

Evet, haklısınız - ama bu önemli bir konu değil - dizi değerlerini döngüde almakla ilgili bir sorun var. – Raad

Birkaç satır sonlandırıcı eksik görünüyor. Herhangi bir hatayla karşılaşıyor musunuz? –

teşekkürler ........................... –

HTML5, Tuvalete birden fazla dikdörtgenin girilmesi ve çizilmesi

cevap

İlgili konular