Jquery 在clearRect HTML5画布上重画文本

我正试图根据select元素中选择的选项来绘制文本（HTML5画布）。它可以正常工作，直到有两组文本出现在同一位置。似乎clearRect函数就是问题所在。文本将不会在清除的空间上重新绘制。以下是我对该部分的jQuery代码：

//DROPDOWN
$("#bureau").change(function () {
    if ($(this).val() == "ste-julie-droite") {
        // BUREAU
        oCtx.font = "11px Vonnes"; // different font
        oCtx.fillStyle = "#67686a";
        oCtx.textBaseline = "top"; // text baseline at the top
        oCtx.fillText("Company", 260, 160, 225);
        //VILLE
        oCtx.font = "11px VonnesReg"; // different font
        oCtx.fillStyle = "#67686a";
        oCtx.textBaseline = "top"; // text baseline at the top
        oCtx.fillText("123 Street City", 260, 172, 225);
    } else {
        oCtx.fillStyle = "#333";
        oCtx.clearRect(260, 160, 225, 16);
        oCtx.clearRect(260, 172, 225, 16);
    }
    if ($(this).val() == "ste-julie-gauche") {
        // BUREAU
        oCtx.font = "11px Vonnes"; // different font
        oCtx.fillStyle = "#67686a";
        oCtx.textBaseline = "top"; // text baseline at the top
        oCtx.fillText("Company", 12, 155, 225);
        //VILLE
        oCtx.font = "11px VonnesReg"; // different font
        oCtx.fillStyle = "#67686a";
        oCtx.textBaseline = "top"; // text baseline at the top
        oCtx.fillText("123 Street City", 12, 167, 225);
    } else {
        oCtx.fillStyle = "#333";
        oCtx.clearRect(12, 167, 225, 16);
        oCtx.clearRect(12, 155, 225, 16);
    }
    if ($(this).val() == "beauceville-droite") {
        // BUREAU - 1
        oCtx.font = "11px Vonnes"; // different font
        oCtx.fillStyle = "#67686a";
        oCtx.textBaseline = "top"; // text baseline at the top
        oCtx.fillText("Company 2", 260, 149, 225);
        // BUREAU - 2
        oCtx.font = "11px Vonnes"; // different font
        oCtx.fillStyle = "#67686a";
        oCtx.textBaseline = "top"; // text baseline at the top
        oCtx.fillText("Sub-title 1", 260, 160, 225);
        //VILLE
        oCtx.font = "11px VonnesReg"; // different font
        oCtx.fillStyle = "#67686a";
        oCtx.textBaseline = "top"; // text baseline at the top
        oCtx.fillText("8899 Super street", 260, 172, 225);
    } else {
        oCtx.fillStyle = "#333";
        oCtx.clearRect(260, 149, 225, 16);
        oCtx.clearRect(260, 160, 225, 16);
        oCtx.clearRect(260, 172, 225, 16);
    }
    if ($(this).val() == "beauceville-gauche") {
        // BUREAU - 1
        oCtx.font = "11px Vonnes"; // different font
        oCtx.fillStyle = "#67686a";
        oCtx.textBaseline = "top"; // text baseline at the top
        oCtx.fillText("Company 2", 12, 147, 225);
        // BUREAU - 2
        oCtx.font = "11px Vonnes"; // different font
        oCtx.fillStyle = "#67686a";
        oCtx.textBaseline = "top"; // text baseline at the top
        oCtx.fillText("Sub-title 1", 12, 158, 225);
        //VILLE
        oCtx.font = "11px VonnesReg"; // different font
        oCtx.fillStyle = "#67686a";
        oCtx.textBaseline = "top"; // text baseline at the top
        oCtx.fillText("8899 Super street", 12, 170, 225);
    } else {
        oCtx.fillStyle = "#333";
        oCtx.clearRect(12, 147, 225, 16);
        oCtx.clearRect(12, 158, 225, 16);
        oCtx.clearRect(12, 170, 225, 16);
    }
});

---

是否有其他选项可用于使我的文本显示在已清除部分的顶部？谢谢

一种可能的解决方案是将所有clearRect（）从else语句移到顶部，然后从一开始就清除它。然后在第二步中添加文本。这样，您还可以将if语句组合在一起，形成if-else-if关系（蹩脚的解释，请看下面；）

---

实际上，您需要更多地处理X，Y位置，并且应该编写else-if循环，这样一次只触发一个条件

您应该始终首先执行clearRect，然后忘记260 X位置

$("#bureau").change(function () {
    oCtx.fillStyle = "#333";
    oCtx.clearRect(12, 147, 225, 16);
    oCtx.clearRect(12, 158, 225, 16);
    oCtx.clearRect(12, 170, 225, 16);

    if ($(this).val() == "ste-julie-droite") {
        // BUREAU
        oCtx.font = "11px Vonnes"; // different font
        oCtx.fillStyle = "#67686a";
        oCtx.textBaseline = "top"; // text baseline at the top
        oCtx.fillText("Company", 12, 149, 225);
        //VILLE
        oCtx.font = "11px VonnesReg"; // different font
        oCtx.fillStyle = "#67686a";
        oCtx.textBaseline = "top"; // text baseline at the top
        oCtx.fillText("123 Street City", 12, 160, 225);
    } else if ($(this).val() == "ste-julie-gauche") {
        // BUREAU
        oCtx.font = "11px Vonnes"; // different font
        oCtx.fillStyle = "#67686a";
        oCtx.textBaseline = "top"; // text baseline at the top
        oCtx.fillText("Company 1", 12, 149, 225);
        //VILLE
        oCtx.font = "11px VonnesReg"; // different font
        oCtx.fillStyle = "#67686a";
        oCtx.textBaseline = "top"; // text baseline at the top
        oCtx.fillText("123 Street City", 12, 160, 225);
    } else if ($(this).val() == "beauceville-droite") {
        // BUREAU - 1
        oCtx.font = "11px Vonnes"; // different font
        oCtx.fillStyle = "#67686a";
        oCtx.textBaseline = "top"; // text baseline at the top
        oCtx.fillText("Company 2", 12, 149, 225);
        // BUREAU - 2
        oCtx.font = "11px Vonnes"; // different font
        oCtx.fillStyle = "#67686a";
        oCtx.textBaseline = "top"; // text baseline at the top
        oCtx.fillText("Sub-title 1", 12, 160, 225);
        //VILLE
        oCtx.font = "11px VonnesReg"; // different font
        oCtx.fillStyle = "#67686a";
        oCtx.textBaseline = "top"; // text baseline at the top
        oCtx.fillText("8899 Super street", 12, 172, 225);
    } else if ($(this).val() == "beauceville-gauche") {
        // BUREAU - 1
        oCtx.font = "11px Vonnes"; // different font
        oCtx.fillStyle = "#67686a";
        oCtx.textBaseline = "top"; // text baseline at the top
        oCtx.fillText("Company 3", 12, 149, 225);
        // BUREAU - 2
        oCtx.font = "11px Vonnes"; // different font
        oCtx.fillStyle = "#67686a";
        oCtx.textBaseline = "top"; // text baseline at the top
        oCtx.fillText("Sub-title 1", 12, 160, 225);
        //VILLE
        oCtx.font = "11px VonnesReg"; // different font
        oCtx.fillStyle = "#67686a";
        oCtx.textBaseline = "top"; // text baseline at the top
        oCtx.fillText("8899 Super street", 12, 172, 225);
    }
});

---

检查这个

太棒了，非常感谢！成功了。我现在明白怎么回事了。再次感谢！谢谢你的回答，Niddro快了一分钟；）

$("#bureau").change(function () {
    oCtx.fillStyle = "#333";
    oCtx.clearRect(12, 147, 225, 16);
    oCtx.clearRect(12, 158, 225, 16);
    oCtx.clearRect(12, 170, 225, 16);

    if ($(this).val() == "ste-julie-droite") {
        // BUREAU
        oCtx.font = "11px Vonnes"; // different font
        oCtx.fillStyle = "#67686a";
        oCtx.textBaseline = "top"; // text baseline at the top
        oCtx.fillText("Company", 12, 149, 225);
        //VILLE
        oCtx.font = "11px VonnesReg"; // different font
        oCtx.fillStyle = "#67686a";
        oCtx.textBaseline = "top"; // text baseline at the top
        oCtx.fillText("123 Street City", 12, 160, 225);
    } else if ($(this).val() == "ste-julie-gauche") {
        // BUREAU
        oCtx.font = "11px Vonnes"; // different font
        oCtx.fillStyle = "#67686a";
        oCtx.textBaseline = "top"; // text baseline at the top
        oCtx.fillText("Company 1", 12, 149, 225);
        //VILLE
        oCtx.font = "11px VonnesReg"; // different font
        oCtx.fillStyle = "#67686a";
        oCtx.textBaseline = "top"; // text baseline at the top
        oCtx.fillText("123 Street City", 12, 160, 225);
    } else if ($(this).val() == "beauceville-droite") {
        // BUREAU - 1
        oCtx.font = "11px Vonnes"; // different font
        oCtx.fillStyle = "#67686a";
        oCtx.textBaseline = "top"; // text baseline at the top
        oCtx.fillText("Company 2", 12, 149, 225);
        // BUREAU - 2
        oCtx.font = "11px Vonnes"; // different font
        oCtx.fillStyle = "#67686a";
        oCtx.textBaseline = "top"; // text baseline at the top
        oCtx.fillText("Sub-title 1", 12, 160, 225);
        //VILLE
        oCtx.font = "11px VonnesReg"; // different font
        oCtx.fillStyle = "#67686a";
        oCtx.textBaseline = "top"; // text baseline at the top
        oCtx.fillText("8899 Super street", 12, 172, 225);
    } else if ($(this).val() == "beauceville-gauche") {
        // BUREAU - 1
        oCtx.font = "11px Vonnes"; // different font
        oCtx.fillStyle = "#67686a";
        oCtx.textBaseline = "top"; // text baseline at the top
        oCtx.fillText("Company 3", 12, 149, 225);
        // BUREAU - 2
        oCtx.font = "11px Vonnes"; // different font
        oCtx.fillStyle = "#67686a";
        oCtx.textBaseline = "top"; // text baseline at the top
        oCtx.fillText("Sub-title 1", 12, 160, 225);
        //VILLE
        oCtx.font = "11px VonnesReg"; // different font
        oCtx.fillStyle = "#67686a";
        oCtx.textBaseline = "top"; // text baseline at the top
        oCtx.fillText("8899 Super street", 12, 172, 225);
    }
});