javascript - 向画布添加矩形时自动添加像素

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 函数添加的每个矩形自动添加 70 像素drawRect()。

到目前为止我已经尝试过这个Jcanvas

我这样做的原因是我想通过单击此“画布”中的矩形将数据加载到另一个画布中。我认为使用 JQuerydrawRect()而不是像下面那样手动输入会更容易。由于矩形没有任何 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]
    });
});