自動添加像素時添加矩形以帆布

Question

目前，我有這個

var x = 150; 
var o = 100; 
var canvas = $('#NodeList').get(0); 
var ctx = canvas.getContext('2d'); 

ctx.strokeStyle = "red"; 
canvas.height = 0; 

var rects = [ 
    [20, 20, x, o], 
    [20, 130, x, o], 
    [20, 240, x, o], 
    [20, 350, x, o], 
    [20, 460, x, o], 
    [20, 570, x, o], 
    [20, 680, x, o], 
    [20, 790, x, o], 
    [20, 900, x, o] 
]; 

，你可以看到我有手動添加每一個矩形。

我想通過使用jQuery函數drawRect()自動添加每個矩形添加的70個像素。

我已經試過這到目前爲止Jcanvas

我的原因是我想通過單擊矩形在這個「畫布」將數據加載到其他畫布。我認爲使用JQuery drawRect()而不是像以下那樣手動輸入它會更容易。由於矩形沒有任何ID。

我被卡住了，請你爲我清理一下東西？

Answer 1

你需要這樣的事，我從您的評論理解爲：

// Using Canvas API 
ctx.fillStyle = '#000000'; 

rects.forEach(function (rect) { 
    ctx.fillRect.apply(ctx, rect); 
}); 

// Using Jcanvas 
var canvas = $('#NodeList'); 

rects.forEach(function (rect) { 
    canvas.drawRect({ 
     fillStyle: '#000000', 
     x: rect[0], 
     y: rect[1], 
     width: rect[2], 
     height: rect[3] 
    }); 
});