كيفية مسح اللوحة القماشية لإعادة رسمها

Question

بعد تجربة العمليات المركبة ورسم الصور على القماش ، أحاول الآن إزالة الصور والتكوين. كيف أقوم بهذا العمل؟

أحتاج إلى مسح قماش لإعادة رسم الصور الأخرى ؛ يمكن أن يستمر هذا لفترة من الوقت ، لذلك لا أعتقد أن رسم مستطيل جديد في كل مرة سيكون الخيار الأكثر كفاءة.

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 ٪ حوالي 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

• يستجيب Chrome جيدًا لـ: 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

استخدم طريقة ClearRect عن طريق تمرير تحسس X ، Y وارتفاع وعرض اللوحة القماشية. سيقوم ClearRect بمسح قماش كامل على النحو التالي:

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

Answer 7

هذا هو 2018 وما زالت هناك طريقة أصلية لإزالة اللوحة القماشية تمامًا لإعادة رسمها. clearRect() لا مسح قماش تماما. لم يتم مسح الرسومات غير المملوءة بالملء (على سبيل المثال. rect())

1 ل تماما قماش واضح بغض النظر عن كيفية رسمك:

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

الايجابيات: يحافظ على Strokestyle ، FillStyle إلخ ؛ لا تأخر

السلبيات: غير ضروري إذا كنت تستخدم بالفعل BeginPath قبل رسم أي شيء

2. استخدام اختراق العرض/الارتفاع:

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

أو

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

الايجابيات: يعمل مع IE CONS: إعادة تعيين Strokestyle ، FillStyle إلى Black ؛ متأخر

كنت أتساءل لماذا لا يوجد حل أصلي. في الحقيقة، clearRect() يعتبر حل سطر واحد لأن معظم المستخدمين يفعلون ذلك beginPath() قبل رسم أي مسار جديد. على الرغم من أن BeginPath يتم استخدامه فقط أثناء رسم الخطوط وليس مسارًا مغلقًا مثل rect().

هذا هو السبب في أن الإجابة المقبولة لم تحل مشكلتي وانتهى بي الأمر إلى إضاعة ساعات في تجربة الاختراقات المختلفة. لعنك موزيلا

Answer 8

هناك الكثير من الإجابات الجيدة هنا. ملاحظة أخرى هي أنه في بعض الأحيان يكون من الممتع إزالة اللوحة القماشية جزئيًا. وهذا هو ، "تلاشى" الصورة السابقة بدلاً من محوها بالكامل. هذا يمكن أن يعطي آثار مسارات لطيفة.

من السهل. لنفترض أن لون خلفيتك أبيض:

// 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

أتساءل كيف يعمل لكنه يفعل!

Answer 10

في WebKit ، تحتاج إلى ضبط العرض على قيمة مختلفة ، ثم يمكنك إعادته إلى القيمة الأولية

Answer 11

لقد وجدت أنه في جميع المتصفحات التي أختبرها ، فإن أسرع طريقة هي ملء بالفعل باللون الأبيض ، أو كل ما تريد. لديّ شاشة كبيرة جدًا وفي وضع ملء الشاشة ، يكون واضحًا بطيئًا بشكل مؤلم ، لكن التعبئة معقولة.

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

هذا عمل لبلدي piechart في chart.js

<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 255: مع FF & Safari

ولكن

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 فقط ، إذا كان لديك في نموذج لتقديم الرسم الخاص بك ، فستحصل على إرسال بدلاً من ذلك المقاصة ، أو ربما يمكن مسحه أولاً ثم تحميل رسم فراغ ، لذلك ستحتاج إلى إضافة أ PurningDefault عند التنقل للوظيفة:

   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;
    }
}

الآن أينما قمت بتعيين ClearCanvas على True ، ستقوم بمسح جميع العناصر من الشاشة.