Question

我的概念很简单，我在textarea元素中为每个字符画了一个正方形。绘制它们的环境是500x500帆布。但问题是：当方块达到500px的限制时，我无法跳到下一行。

每个方格都是10x10，因此，只有50个方格可以放在500px的单行中。

这是我的代码：

<textarea id="text"></textarea>
<button id="convert">Draw Squares</button><br>

<canvas id="canvas" width="500" height="500" style="border:1px solid"></canvas>
<script>
    var canvas = document.getElementById('canvas'),
        context = canvas.getContext('2d'),
        text = document.getElementById("text");

    var y = 0;

    document.getElementById("convert").addEventListener("click", function(){
        context.beginPath();

        for(var i = 0; i < text.value.length; i++){
            if(i > 0 && i % 50 == 0) y++; // Here I try to jump to the next line
            context.rect(i * 10, y * 10, 10, 10);
        }

        context.fillStyle = 'red';
        context.fill();
    });
</script>

问题可能在循环内部，但是，我不知道那里的实际问题是什么。

Answer 1

您的y值是正确的，但您需要将x重置为0. %运算符适用于此：

var canvas = document.getElementById('canvas'),
    context = canvas.getContext('2d'),
    text = document.getElementById("text");

var y = 0;

document.getElementById("convert").addEventListener("click", function(){
    context.beginPath();

    for(var i = 0; i < text.value.length; i++){
        if(i > 0 && i % 50 == 0) y++; // Here I try to jump to the next line
        console.log(y)
        x = (i % 50) * 10
        context.rect(x, y * 10, 10, 10);
    }

    context.strokeStyle = 'red';
    context.stroke();
});

JS FIddle示例：https://jsfiddle.net/igor_9000/Lx0vq3st/

希望有所帮助！

矩形位置问题

1 个答案: