Автоматическое добавление пикселей при добавлении прямоугольника на холст

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

, как вы можете видеть, я добавил вручную каждый прямоугольник.

Я хочу добавить автоматически 70 пикселей по каждому прямоугольнику, добавленному с помощью функции jQuery drawRect().

Я попробовал это до сих пор Jcanvas

Моей причину этого заключается в том, что я хочу, чтобы загрузить данные в другой холст, нажав на прямоугольнике в этом «холсте». Я думаю, что было бы проще использовать JQuery drawRect() вместо того, чтобы вводить его вручную, как показано ниже. Так как у прямоугольников нет идентификатора.

Я застрял, можете ли вы, пожалуйста, очистить вещи для меня?

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