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 に答える