Question

一个小型项目位于以下地址：PLEASE CLICK HERE

计划是根据用户输入（宽度，高度，颜色）在画布上绘制多个矩形，并将它们在下面的字段中对齐，并尽可能减小面积。字段是“网格预览”。

当前成功绘制一个矩形的JavaScript是：

var canvas = document.getElementById('canvasgrid');
canvas.width = 855;
canvas.height = 500;
var context = canvas.getContext('2d');

function draw(){
    var x = document.getElementById("width").value;
    var y = document.getElementById("height").value;
    var boja = document.getElementById("color").value;
    var arr = [x,y,boja];
    let pos = {x: 0, y: 0};
    arr.forEach(p => {
        context.rect(pos.x, pos.y, p.w, p.h);
        pos.x += p.w; // should return to zero at the edge of the canvas
        pos.y += p.h;
        context.beginPath();
        context.stroke();
        context.fillStyle = boja;
        context.fill();
        context.fillStyle = "white";
        context.font="bold 10px sans-serif";
        context.textAlign="center"; 
        context.textBaseline = "middle";
        context.fillText(x+'x'+y, 10+(x/2),10+(y/2));
    });
}

在用户单击绿色按钮后，加载其他输入时确实有问题。我正在使用的Color JavaScript插件是jsoclor，也不确定如何在每个重复的字段中加载它。

请让我知道是否需要其他信息。通过提及的链接，所有代码都可以在源文件中看到。

谢谢。

Answer 1

一个简单的答案可能是将用户输入存储在对象数组中（例如[{w：...，h：...，color：...}，{...} ...] ）并在函数中进行迭代。

在您的函数中，您可能会遇到以下内容：

let pos = {x: 0, y: 0};
arr.forEach(p => {
  context.rect(pos.x, pos.y, p.w, p.h);
  pos.x += p.w; // should return to zero at the edge of the canvas
  //pos.y += left as an exercise to the reader ;)
});

从输入中绘制多个画布并计算如何对齐它们

1 个答案: