HTML5, JavaScript và vẽ nhiều hình chữ nhật trong canvas

Tại sao nhiều hình chữ nhật của tôi không vẽ trong canvas?HTML5, JavaScript và vẽ nhiều hình chữ nhật trong canvas

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

Cảm ơn bạn đã trợ giúp.

Nguồn

2013-03-05 Hello-World

tôi sẽ xem xét mã của bạn trong một giây nhưng chỉ muốn cho bạn biết rằng các plugin jCanvas cho jQuery đơn giản hoá việc vẽ trên vải rất nhiều. Bạn có thể muốn xem xét nó. :) –

cảm ơn tuyệt vời. Tôi đang cố gắng tìm hiểu điều html5 này vì vậy đây là một trợ giúp tuyệt vời. –

Ok, vì vậy bạn đã gần đến đó. Khi bạn lặp vòng quanh mảng hình chữ nhật của mình, bạn đang lặp qua ô chính không phải là đối tượng của chính chúng (xem How to Loop through plain JavaScript object with objects as members?). Ngoài ra, như @ jimjimmy1995 đã chỉ ra, bạn cần đặt điền bằng .fillStyle là. fillRect không có thông số điền.

Mã này sẽ làm việc:

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

    } 

}

Nguồn

2013-03-05 09:52:10 Raad

Bạn không cần phải tô màu cho nó?

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

Nguồn

2013-03-05 09:35:55

Đúng, bạn nói đúng - nhưng đây không phải là vấn đề lớn - có vấn đề với việc nhận các giá trị mảng trong vòng lặp. – Raad

Có vẻ như bạn đang thiếu một vài thiết bị đầu cuối dòng. bạn đang nhận được bất kỳ lỗi nào? –

cảm ơn ........................... –

HTML5, JavaScript và vẽ nhiều hình chữ nhật trong canvas

Trả lời

Các vấn đề liên quan