javascript - 更改 Canvas 填充样式而不与以前的颜色重叠

Question

我正在尝试更改聚焦和聚焦事件的填充样式。当事件多次调用时，它会重叠。这是我的代码:

function FillColorToFields(id, isOnFocus) {
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
    var coordinates = $('#hidCoord_' + id).val().split(',');
    if (isOnFocus) {
        context.fillStyle = "rgba(0,255,0,0.1)";
        context.fillRect(coordinates[0], coordinates[1], coordinates[2], coordinates[3]);
    } else {
        context.fillStyle = "rgba(255, 255, 255, 0.5)";
        context.fillRect(coordinates[0], coordinates[1], coordinates[2], coordinates[3]);
    }
}

Answer 1

只需使用context.clearRect(x, y, width, height)。其目的是删除之前绘制的矩形内容(查看 documentation )。请参阅this forked fiddle举个例子。