自动添加像素时添加矩形以帆布

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