Question

我遇到.rect()时遇到问题。我使用.drawImage(canvas...)创建了一个网格，每当我.stroke()时，它都会再次出现。如何完全删除该矩形？

此致

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

    wt = canvas.width,
    ht = canvas.height;

canvas.onmousedown = function (e) {
    e.preventDefault(); // disabling selecting
    context.strokeStyle = "red";
    context.lineWidth = 1;
    context.rect(wt / 2 - 50, ht / 2 - 100, 100, 200);
    context.fillText("<- why is it here? didn't \"clearRect()\" delete it?", 8, 8);
    context.stroke();
};

function grid() {
    var h = 2.5,
        p = 2.5;
    context.rect(0.5, 0.5, 5, 5);
    context.strokeStyle = "#f0f0f0";
    context.stroke(); // creating a 5x5 small rectangle in top left corner
    for (i = 0; i < wt; i += p) {
        p *= 2;
        context.drawImage(canvas, p, 0); // replicating it horizontally...
    }
    for (i = 0; i < ht; i += h) {
        h *= 2;
        context.drawImage(canvas, 0, h); // ... and vertically
    }
    context.clearRect(0, 0, 5, 5); // here I am deleting that stroke, because I don't need it anymore
    context.drawImage(canvas, 0, 55, 5.5, 5.5, 0, 0, 5.5, 5.5); // drawing it with drawImage();
}
grid();

Answer 1

clearRect清除画布的一部分，而不是使用rect绘制的路径的一部分。在应用笔划时，调用beginPath()清除之前的rect。

See this updated example

一个Rectangle一直出现在context.clearRect（）之后;

1 个答案: