どのようにキャンバスの再描画

Question

後の試合運びに画像のキャンバス上で私からの除去画像と合成.いるのか？

いのキャンバスの再描画その他の画像だからとは思わないを描画す新しいrectangleを毎回する最も効率的なオプションです。

Answer 1

const context = canvas.getContext('2d');

context.clearRect(0, 0, canvas.width, canvas.height);

Answer 2

用途： context.clearRect(0, 0, canvas.width, canvas.height);

ここでの記述方法の全体をキャンバスに入力します。

使用しません： canvas.width = canvas.width;

リセット canvas.width すべてリセットキャンバスの状態など変化幅,strokeStyle等）、 では比clearRect)されているとは思いませんが、仕事のすべてのブラウザで、いつ何かしらわれている。

対変形の座標

の場合の変換マトリクス例を使用 scale, rotate, や translate し context.clearRect(0,0,canvas.width,canvas.height) が不明全体の見える部分のキャンバスに入力します。

この解決法は？リセットの変換マトリクスの前の片付けに気をつけようキャンバス:

// Store the current transformation matrix
context.save();

// Use the identity matrix while clearing the canvas
context.setTransform(1, 0, 0, 1, 0, 0);
context.clearRect(0, 0, canvas.width, canvas.height);

// Restore the transform
context.restore();

編集： いただきました、でもプロファイリング(クロム)では約10%より速いクリア300x150(デフォルトのサイズ)キャンバスなしでリセットに変換した。としてのサイズのキャンバスの増加はこの違いに絞り込めます。

ることは比較的軽微でありますが、多くの場合、そのまま描画に比べてご清算およびこの性能差する関係ありません。

100000 iterations averaged 10 times:
1885ms to clear
2112ms to reset and clear

Answer 3

あなたは線を描画する場合は、必ず忘れないようにします。

context.beginPath();

それ以外のラインはクリアされません。

Answer 4

その他は、すでに質問に答える優れた仕事をしているが、コンテキストオブジェクト上の簡単なclear()の方法は、あなた（それが私にはあった）に有用であろうあれば、これは私がここでの回答に基づいて、使用実装されます：

CanvasRenderingContext2D.prototype.clear = 
  CanvasRenderingContext2D.prototype.clear || function (preserveTransform) {
    if (preserveTransform) {
      this.save();
      this.setTransform(1, 0, 0, 1, 0, 0);
    }

    this.clearRect(0, 0, this.canvas.width, this.canvas.height);

    if (preserveTransform) {
      this.restore();
    }           
};

使用方法：

window.onload = function () {
  var canvas = document.getElementById('canvasId');
  var context = canvas.getContext('2d');

  // do some drawing
  context.clear();

  // do some more drawing
  context.setTransform(-1, 0, 0, 1, 200, 200);
  // do some drawing with the new transform
  context.clear(true);
  // draw more, still using the preserved transform
};

Answer 5

• クローム対応を: context.clearRect ( x , y , w , h ); このように日@Pentium10がIE9のように完全に無視すること。
• IE9のように対応: canvas.width = canvas.width; ただし、明確なライン、形状、画像、その他のオブジェない限り、も利用@John Allsoppソリューションの最初の幅になります。

ようとした場合に、キャンバスの文脈で作成したようになります:

var canvas = document.getElementById('my-canvas');
var context = canvas.getContext('2d');

利用できる方法のようになります:

function clearCanvas(context, canvas) {
  context.clearRect(0, 0, canvas.width, canvas.height);
  var w = canvas.width;
  canvas.width = 1;
  canvas.width = w;
}

Answer 6

X、Y座標と高さとキャンバスの幅を通過させることによって使用clearRect方法。

：ClearRectは全体としてキャンバスをクリアします

canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, canvas.width, canvas.height);

Answer 7

これは2018年で、まだ再描画のための完全に明確なキャンバスにネイティブ方法はありません。 clearRect()の を完全にキャンバスをクリアしません。非フィルタイプの図面は一掃されていない（例えば。rect()）

1.Toかかわらず、あなたが描く方法のの完全の明確なキャンバスます：

context.clearRect(0, 0, context.canvas.width, context.canvas.height);
context.beginPath();

長所：ジャムstrokeStyle、のfillStyleなど。ノー遅れ;

短所：不要すでに何かを描画する前にbeginPathを使用している場合は、

幅/高さハック2.Usingます：

context.canvas.width = context.canvas.width;

または

context.canvas.height = context.canvas.height;

長所：IEで動作します 短所：リセットstrokeStyle、黒へのfillStyle。ラグ;

ネイティブ解決策が存在しない理由を私は思っていました。ほとんどのユーザーは、新しいパスを描画する前にclearRect()を行うため、実際には、beginPath()は1行のソリューションとして考えられています。 beginPathは行とrect().等しない閉じた経路を描きながら使用するだけであるが

これが受け入れられた答えは私の問題を解決していなかったと私は別のハックをしようとして時間を無駄に終わった理由です。あなたを呪いモジラ

Answer 8

ここでは良い答えのトンがあります。 1つの、さらにノートは部分的にしかキャンバスをクリアするために、その時々の楽しみです。 であること、それを完全に消去するのではなく、前の画像を「フェードアウト」。 これは素敵なトレイル効果を与えることができます。

それは簡単です。あなたの背景色を想定することは白です。

// assuming background color = white and "eraseAlpha" is a value from 0 to 1.
myContext.fillStyle = "rgba(255, 255, 255, " + eraseAlpha + ")";
myContext.fillRect(0, 0, w, h);

Answer 9

は簡単な方法で行うことです。

canvas.width = canvas.width

IDKそれは動作しますが、それがない方法！

Answer 10

あなたが別の値に幅を設定する必要がWebKitの中で、あなたが戻って初期値を設定することができます。

Answer 11

私は白で、すべてのブラウザのI試験では、最速の方法はfillRect実際にあること、またはご希望whataever色を発見しました。私は非常に大型モニターを持っており、フルスクリーンモードでclearRectはagonizingly遅いですが、fillRectは合理的である。

context.fillStyle = "#ffffff";
context.fillRect(0,0,canvas.width, canvas.height);

の欠点は、キャンバスが透明なくなったということではありません。

Answer 12

function clear(context, color)
{
    var tmp = context.fillStyle;
    context.fillStyle = color;
    context.fillRect(0, 0, context.canvas.width, context.canvas.height);
    context.fillStyle = tmp;
}

Answer 13

このはchart.jsで私pieChartのために働いた。

<div class="pie_nut" id="pieChartContainer">
    <canvas id="pieChart" height="5" width="6"></canvas> 
</div>

$('#pieChartContainer').html(''); //remove canvas from container
$('#pieChartContainer').html('<canvas id="pieChart" height="5" width="6"></canvas>'); //add it back to the container

Answer 14

そして、自分の書いた文章の使用に関わらず、境界及びマトリクス変換:

function clearCanvas(canvas) {
  const ctx = canvas.getContext('2d');
  ctx.save();
  ctx.globalCompositeOperation = 'copy';
  ctx.strokeStyle = 'transparent';
  ctx.beginPath();
  ctx.lineTo(0, 0);
  ctx.stroke();
  ctx.restore();
}

基本的には、これにより省の現在の状態コンテキストを描く透明ピクセル copy として globalCompositeOperation.その後、回復する直前のコンテキストの状態です。

Answer 15

単純ではなく、非常に読みやすい方法はこれを記述することです。

var canvas = document.getElementId('canvas');

// after doing some rendering

canvas.width = canvas.width;  // clear the whole canvas

Answer 16

私はいつも使用して

cxt.fillStyle = "rgb(255, 255, 255)";
cxt.fillRect(0, 0, canvas.width, canvas.height);

Answer 17

最速の方法：

canvas = document.getElementById("canvas");
c = canvas.getContext("2d");

//... some drawing here

i = c.createImageData(canvas.width, canvas.height);
c.putImageData(i, 0, 0); // clear context by putting empty image data

Answer 18

context.clearRect(0,0,w,h)   

RGBA値で指定した矩形を塗りつぶします。
0 0 0 0：クローム
と 0 0 0 255：FF＆サファリ

と

しかし、

context.clearRect(0,0,w,h);    
context.fillStyle = 'rgba(0,0,0,1)';  
context.fillRect(0,0,w,h);  

で塗りつぶされた四角形をしましょう 0 0 0 255
無ブラウザを問題では！

Answer 19

あなただけのclearRectを使用する場合は、あなたの図面を提出する形でそれを持っている場合は、

、、あなたの代わりに決済を提出し得るでしょう、または多分それは最初にクリアすることができ、あなたが必要となりますので、その後、空描画をアップロード機能のbegginingでのpreventDefaultを追加します：

   function clearCanvas(canvas,ctx) {
        event.preventDefault();
        ctx.clearRect(0, 0, canvas.width, canvas.height);
    }


<input type="button" value="Clear Sketchpad" id="clearbutton" onclick="clearCanvas(canvas,ctx);">

希望、それが誰かを助けます。

Answer 20

Context.clearRect(starting width, starting height, ending width, ending height);

例：context.clearRect(0, 0, canvas.width, canvas.height);

Answer 21

これらは、標準のキャンバスをクリアする方法のすべての偉大な例ですが、あなたはpaperjsを使用している場合、これは動作します：

JavaScriptでグローバル変数を定義します：

var clearCanvas = false;

あなたのPaperScriptから

は定義します：

function onFrame(event){
    if(clearCanvas && project.activeLayer.hasChildren()){
        project.activeLayer.removeChildren();
        clearCanvas = false;
    }
}

あなたがtrueにclearCanvasを設定どこ

さて、それが画面からすべての項目をクリアします。