0

キャンバスに長方形を描画するスクリプトの関数があります。「if」条件で描画された長方形をきれいにしたいです。キャンバスにもテキストがあり (座標は 0,80)、クリーニングする必要はありません。長方形のみをクリーニングする必要があります。

function red_stroke_2(yy) 
{ 
    //Red color edges
    context.strokeStyle = "#f00";
    context.strokeRect(0,yy,800,40);
}
 if (Option1==answers[qnumber])
{
     red_stroke_2(80);
}
4

2 に答える 2

0

Canvas は、描画されたプリミティブや行われた呼び出しについて認識しないという意味で「ステートレス」です。そのため、特定の描画呼び出しだけを元に戻すことはできません。図面を変更する必要がある場合は、変更したくない項目をすべて再描画する必要があります。もちろん、単一のピクセルを変更するオプションがあるため、テキストが黒で四角形が赤の場合、すべての赤のピクセルを置き換えることができますが、アンチエイリアスが有効になっていると非常に複雑になり、うまく機能しません.

そのため、領域全体を再描画します (長方形の描画を省略してテキストをレンダリングします)。または、2 つのキャンバスを重ねて使用することを検討してください (1 つはテキスト付き、もう 1 つは背景付き)。もちろん、テキストを気にせずに背景を再レンダリングできます。

最後になりましたが、SVG を使用することも代替手段になる可能性があります。これはステートフルであり、変更/挿入/削除できる DOM 要素で構成されており、ブラウザーが合成を行うためです。その場合、rect要素とtext要素があり、前者を単純に削除できます。

于 2013-03-09T12:12:21.740 に答える
0

これにより、長方形の代わりに透明なピクセルが配置されます。

function clean_red_stroke(yy)
{
    context.clearRect(0,yy,800,40);
}
//Call it with the same 'yy' you used in the drawing method
clean_red_stroke(80);

ただし、たとえば、より多くの変数 (したがって最も一般的な関数) を使用することで、コードを改善できると思います。

于 2013-03-09T12:14:20.083 に答える