画布保留第一个文字画？

Question

我正在使用画布编写一个小应用程序。

当我点击下一个画布绘制另一个文本时，在应用程序中有一个“下一步”按钮。

我在重绘文本之前使用clearRect清除画布。但第一个文字绘制永远不会删除。

这是我的代码：

ctx = $("canvas").get("0").getContext('2d');
    ctx.canvas.width = 300;
    ctx.canvas.height = 100;
 var fontSize = 300/4;
    ctx.font= fontSize + "px Times New Roman";
    ctx.textAlign = 'center';
    ctx.textBaseline = 'top';
    ctx.fillStyle = "rgb(255, 0, 0)";
    ctx.fillText(VietBasic.mainWord[0],300/2,(100 - fontSize*1.4)/2);
$("#next").bind("click.next", function(){
       k++;
       if(k >= VietBasic.mainWord.length){
           k=0;
       }
       ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height);
       ctx.font= fontSize + "px Times New Roman";
       ctx.textAlign = 'center';
       ctx.textBaseline = 'top';
       ctx.fillStyle = "rgb(255, 0, 0)";
       ctx.fillText(VietBasic.mainWord[k],300/2,(100 - fontSize*1.4)/2);
       $("#imgSample").html(VietBasic.mainWord[k]);

       $("#wordSample").html(VietBasic.keyWord[k]);

       $("#mainImg").attr("src",VietBasic.imageSample[k]);
    });

这是截图：

请帮助我，我是新手...... 谢谢阅读！ ：）

Answer 1

看起来问题与您的clearRect调用有关。你使用它的ctx.canvas.height值，但只设置为100，你的画布比那个大得多。

ctx.canvas.width = 300;
ctx.canvas.height = 100;
...
ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height);

你想要使用像

这样的东西

var myCanvas= document.getElementById("myCanvasID");

ctx.clearRect(0,0,myCanvas.width,myCanvas.height);

或至少暂时设定

ctx.canvas.height = 1000;