Question

我尝试绘制文本（HTML5画布），具体取决于在select元素中选择的选项。它正常工作，直到出现在同一个地方的2组文本。似乎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);
    }
});

我可以使用另一个选项让我的文字显示在已清除部分的顶部吗？谢谢！

Answer 1

一种可能的解决方案是将所有clearRect（）从else语句移到顶部并从头开始清除它。然后在第二步中添加文本。这样你也可以将if语句组合在一起形成一个if-else if关系（糟糕的解释，只需看下面的内容;））。

$("#bureau").change(function () {
        oCtx.clearRect(260, 149, 225, 16);
        oCtx.clearRect(260, 160, 225, 16);
        oCtx.clearRect(260, 172, 225, 16);
        oCtx.clearRect(12, 147, 225, 16);
        oCtx.clearRect(12, 155, 225, 16);
        oCtx.clearRect(12, 158, 225, 16);
        oCtx.clearRect(12, 167, 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", 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 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 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 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);
    }
});

Answer 2

实际上你需要更多地使用你的X，Y位置，你应该编写你的其他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);
    }
});

选中此http://jsfiddle.net/ZigmaEmpire/ka1urxt9/1/

在clearRect HTML5 Canvas上重绘文本

2 个答案: