javascript - 矩形位置问题

Question

我的概念很简单，我为文本区域元素中的每个字符绘制一个正方形。绘制它们的环境是 500x500 的 Canvas 。但问题是:当方 block 达到 500px 的限制时，我无法跳到下一行。

每个方 block 的大小为 10x10，因此，500 像素的单行中只能容纳 50 个方 block 。

这是我的代码:

<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/

希望有帮助!