自动添加像素时，将矩形添加到画布

Automatically add pixels when adding rectangle to canvas

本文关键字：添加 像素      更新时间：2023-09-26

目前，我有这个

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。

我卡住了，你能帮我澄清一下吗?

正如我从你的评论中所理解的那样，你需要这样的东西:

// 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]
    });
});
相关文章：