วิธีล้างผ้าใบสำหรับการวาดใหม่

หลังจากทดลองใช้งานคอมโพสิตและวาดภาพบนผืนผ้าใบตอนนี้ฉันกำลังพยายามลบภาพและคอมโพสิต ฉันจะทำสิ่งนี้ได้อย่างไร

ฉันต้องล้างผืนผ้าใบเพื่อวาดภาพอื่น สิ่งนี้สามารถดำเนินต่อไปได้ชั่วขณะหนึ่งดังนั้นฉันไม่คิดว่าการวาดรูปสี่เหลี่ยมผืนผ้าใหม่ทุกครั้งจะเป็นตัวเลือกที่มีประสิทธิภาพที่สุด

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

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

ใช้: context.clearRect(0, 0, canvas.width, canvas.height);

นี่เป็นวิธีที่เร็วและเป็นคำอธิบายที่ชัดเจนที่สุดในการล้างผืนผ้าใบทั้งหมด

ไม่ได้ใช้: canvas.width = canvas.width;

การรีเซ็ตcanvas.widthรีเซ็ตสถานะ Canvas ทั้งหมด (เช่นการแปลง, LineWidth, 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();

แก้ไข: ฉันเพิ่งเสร็จสิ้นการทำโปรไฟล์และ (ใน Chrome) มันเร็วกว่าประมาณ 10% ในการล้างผืนผ้าใบขนาด 300x150 (ขนาดเริ่มต้น) โดยไม่ต้องรีเซ็ตการแปลง เมื่อขนาดของผ้าใบเพิ่มความแตกต่างนี้จะลดลง

นั่นเป็นเรื่องที่ค่อนข้างไม่มีนัยสำคัญ แต่ในกรณีส่วนใหญ่คุณจะวาดภาพได้มากกว่าที่คุณกำลังเคลียร์และฉันเชื่อว่าความแตกต่างด้านประสิทธิภาพนี้ไม่เกี่ยวข้อง

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

หากคุณกำลังวาดเส้นให้แน่ใจว่าคุณไม่ลืม:

context.beginPath();

ไม่เช่นนั้นเส้นจะไม่ถูกลบ

คนอื่นทำได้ดีมากในการตอบคำถาม แต่ถ้า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
};

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

นี่คือปี 2018 และยังไม่มีวิธีดั้งเดิมในการล้างผืนผ้าใบอย่างสมบูรณ์สำหรับการวาดใหม่ clearRect() ไม่ได้ล้างผ้าใบอย่างสมบูรณ์ ภาพวาดประเภทที่ไม่ได้กรอกจะไม่ถูกล้างออก (เช่นrect())

1.To สมบูรณ์ผืนผ้าใบที่ชัดเจนโดยไม่คำนึงถึงวิธีการที่คุณวาด:

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

จุดเด่น: ถนอมจังหวะสไตล์เติมสไตล์ ฯลฯ ไม่มีความล่าช้า

ข้อด้อย: ไม่จำเป็นถ้าคุณใช้ startPath แล้วก่อนที่จะวาดอะไร

2. การใช้ความกว้าง / ความสูงของการแฮ็ก:

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

หรือ

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

จุดเด่น: ทำงานร่วมกับ IE จุดด้อย: รีเซ็ต strokeStyle, fillStyle เป็น black; laggy;

ฉันสงสัยว่าทำไมวิธีแก้ปัญหาแบบดั้งเดิมไม่มีอยู่จริง ที่จริงแล้วclearRect()ถือเป็นโซลูชั่นบรรทัดเดียวเพราะผู้ใช้ส่วนใหญ่ทำbeginPath()ก่อนวาดเส้นทางใหม่ใด ๆ แม้ว่า startPath จะใช้เฉพาะในขณะที่วาดเส้นและไม่ได้ปิดเส้นทางเช่นrect().

นี่คือเหตุผลที่คำตอบที่ยอมรับไม่ได้แก้ปัญหาของฉันและฉันเสียชั่วโมงลองแฮ็คที่แตกต่างกัน สาปแช่งคุณโมซิลล่า

ใช้วิธี clearRect โดยส่งผ่าน x, y พิกัดและความสูงและความกว้างของผืนผ้าใบ ClearRect จะล้างผ้าใบทั้งหมดเป็น:

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

มีคำตอบที่ดีมากมายที่นี่ หมายเหตุเพิ่มเติมอีกอย่างหนึ่งคือบางครั้งมันก็สนุกที่จะล้างผืนผ้าใบเพียงบางส่วน นั่นคือ "เลือนหายไป" ภาพก่อนหน้าแทนที่จะลบออกทั้งหมด นี่สามารถให้เอฟเฟกต์เส้นทางที่ดี

มันเป็นเรื่องง่าย. สมมติว่าสีพื้นหลังของคุณเป็นสีขาว:

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

วิธีที่รวดเร็วคือการทำ

canvas.width = canvas.width

IDK มันทำงานอย่างไร แต่มัน!

นี่คือสิ่งที่ฉันใช้โดยไม่คำนึงถึงขอบเขตและการแปลงเมทริกซ์:

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จากนั้นเรียกคืนสถานะบริบทก่อนหน้า

สิ่งนี้ใช้ได้กับแผนภูมิวงกลมของฉันใน 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

ฉันได้พบว่าในทุกเบราว์เซอร์ที่ฉันทดสอบวิธีที่เร็วที่สุดคือการเติมจริงด้วยสีขาวหรือสีใด ๆ ที่คุณต้องการ ฉันมีจอมอนิเตอร์ขนาดใหญ่มากและในโหมดเต็มหน้าจอ clearRect นั้นช้ามาก ๆ แต่ fillRect นั้นสมเหตุสมผล

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

ข้อเสียคือผ้าใบไม่โปร่งใสอีกต่อไป

ใน webkit คุณต้องตั้งค่าความกว้างเป็นค่าอื่นจากนั้นคุณสามารถตั้งค่ากลับเป็นค่าเริ่มต้น

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

วิธีที่เรียบง่าย แต่ไม่สามารถอ่านได้มากคือการเขียนสิ่งนี้:

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

// after doing some rendering

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

ฉันมักจะใช้

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

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

เติมสี่เหลี่ยมที่กำหนดด้วยค่า RGBA:
0 0 0 0: ด้วย Chrome
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
ไม่ว่าเบราว์เซอร์จะเป็นเช่นไร!

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

ตัวอย่าง: context.clearRect(0, 0, canvas.width, canvas.height);

วิธีที่สั้นที่สุด:

canvas.width += 0

วิธีที่เร็วที่สุด:

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

หากคุณใช้ clearRect เท่านั้นถ้าคุณมีมันในรูปแบบที่จะส่งรูปวาดของคุณคุณจะได้รับการส่งแทนการล้างหรืออาจจะล้างได้ก่อนแล้วจึงอัพโหลดรูปวาดโมฆะดังนั้นคุณจะต้องเพิ่ม ป้องกันการผิดนัดที่เริ่มต้นของฟังก์ชั่น:

   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);">

หวังว่าจะช่วยใครซักคน

ฉันมักจะใช้สิ่งนี้

ctx.clearRect(0, 0, canvas.width, canvas.height)
window.requestAnimationFrame(functionToBeCalled)

บันทึก

การรวม clearRect และ RequestAnimationFrame ช่วยให้แอนิเมชั่นเหลวมากขึ้นถ้านั่นคือสิ่งที่คุณต้องการ

ทั้งหมดนี้เป็นตัวอย่างที่ดีของวิธีที่คุณล้างผ้าใบมาตรฐาน แต่ถ้าคุณใช้ paperjs นี่จะใช้งานได้:

กำหนดตัวแปรส่วนกลางใน JavaScript:

var clearCanvas = false;

จาก PaperScript ของคุณกำหนด:

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

ตอนนี้ทุกที่ที่คุณตั้งค่า clearCanvas ให้เป็นจริงมันจะเคลียร์ทุกรายการจากหน้าจอ