0

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

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

我使用 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]);
    });

这是截图：

在此处输入图像描述

在此处输入图像描述

请帮助我，我是新手...感谢阅读！:)

4

1 回答 1

0

看起来问题出在您的 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;
于 2013-07-25T03:47:14.637 回答