Làm thế nào để xóa vải để vẽ lại

Sau khi thử nghiệm các thao tác tổng hợp và vẽ hình ảnh trên khung vẽ, bây giờ tôi đang cố gắng xóa hình ảnh và kết hợp. Làm thế nào để tôi làm điều này?

Tôi cần phải xóa khung vẽ để vẽ lại các hình ảnh khác; việc này có thể diễn ra trong một thời gian vì vậy tôi không nghĩ rằng việc vẽ một hình chữ nhật mới mỗi lần sẽ là lựa chọn hiệu quả nhất.

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

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

Sử dụng: context.clearRect(0, 0, canvas.width, canvas.height);

Đây là cách nhanh nhất và mô tả nhất để xóa toàn bộ khung vẽ.

Không được dùng: canvas.width = canvas.width;

Đặt canvas.widthlại tất cả các trạng thái canvas (ví dụ: biến đổi, lineWidth, StroStyle, v.v.), nó rất chậm (so với ClearRect), nó không hoạt động trong tất cả các trình duyệt và nó không mô tả những gì bạn đang thực sự làm.

Xử lý tọa độ biến đổi

Nếu bạn đã sửa đổi ma trận chuyển đổi (ví dụ sử dụng scale, rotatehoặc translate) sau đó context.clearRect(0,0,canvas.width,canvas.height)có thể sẽ không xóa toàn bộ phần hữu hình của canvas.

Giải pháp? Đặt lại ma trận chuyển đổi trước khi xóa khung vẽ:

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

Chỉnh sửa: Tôi vừa thực hiện một số lược tả và (trong Chrome), nhanh hơn khoảng 10% để xóa khung vẽ 300x150 (kích thước mặc định) mà không cần đặt lại biến đổi. Khi kích thước của khung vẽ của bạn tăng sự khác biệt này giảm xuống.

Điều đó đã tương đối không đáng kể, nhưng trong hầu hết các trường hợp, bạn sẽ vẽ nhiều hơn đáng kể so với bạn đang xóa và tôi tin rằng sự khác biệt hiệu suất này là không liên quan.

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

Nếu bạn đang vẽ đường, hãy chắc chắn rằng bạn không quên:

context.beginPath();

Nếu không, các dòng sẽ không được xóa.

Những người khác đã hoàn thành công việc tuyệt vời khi trả lời câu hỏi nhưng nếu một clear()phương pháp đơn giản trên đối tượng ngữ cảnh sẽ hữu ích cho bạn (thì đó là với tôi), đây là cách triển khai tôi sử dụng dựa trên câu trả lời ở đây:

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

Sử dụng:

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 đáp ứng tốt với: context.clearRect ( x , y , w , h );như được đề xuất bởi @ Pentium10 nhưng IE9 dường như hoàn toàn bỏ qua hướng dẫn này.
• IE9 dường như đáp ứng: canvas.width = canvas.width;nhưng nó không xóa các đường kẻ, chỉ hình dạng, hình ảnh và các đối tượng khác trừ khi bạn cũng sử dụng giải pháp thay đổi độ rộng đầu tiên của @John Allsopp.

Vì vậy, nếu bạn có một khung vẽ và bối cảnh được tạo như thế này:

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

Bạn có thể sử dụng một phương pháp như thế này:

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

Đây là năm 2018 và vẫn chưa có phương pháp gốc để xóa hoàn toàn canvas để vẽ lại. clearRect() không xóa hoàn toàn vải. Bản vẽ loại không điền không được xóa (ví dụ. rect())

1. Để hoàn toàn rõ ràng canvas bất kể cách bạn vẽ:

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

Ưu điểm: Bảo toàn đột quỵStyle, fillStyle, v.v.; Không bị giật, lag;

Nhược điểm: Không cần thiết nếu bạn đã sử dụng BeginPath trước khi vẽ bất cứ thứ gì

2.Sử dụng hack chiều rộng / chiều cao:

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

HOẶC LÀ

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

Ưu điểm: Hoạt động với IE Nhược điểm: Đặt lại StroStyle, fillStyle thành màu đen; Chậm trễ;

Tôi đã tự hỏi tại sao một giải pháp bản địa không tồn tại. Trên thực tế, clearRect()được coi là giải pháp dòng đơn vì hầu hết người dùng thực hiện beginPath()trước khi vẽ bất kỳ đường dẫn mới nào. Mặc dù BeginPath chỉ được sử dụng trong khi vẽ các đường và không đóng đường dẫn nhưrect().

Đây là lý do tại sao câu trả lời được chấp nhận không giải quyết được vấn đề của tôi và cuối cùng tôi đã lãng phí hàng giờ để thử các bản hack khác nhau. Nguyền rủa bạn

Sử dụng phương thức clearRect bằng cách chuyển x, y tọa độ và chiều cao và chiều rộng của khung vẽ. ClearRect sẽ xóa toàn bộ khung như:

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

Có rất nhiều câu trả lời hay ở đây. một lưu ý nữa là đôi khi thật thú vị khi chỉ xóa một phần khung vẽ. nghĩa là "làm mờ" hình ảnh trước đó thay vì xóa nó hoàn toàn. điều này có thể cho hiệu ứng đường mòn tốt đẹp.

dễ thôi. giả sử màu nền của bạn là màu trắng:

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

Một cách nhanh chóng là làm

canvas.width = canvas.width

Idk làm thế nào nó hoạt động nhưng nó làm!

Đây là những gì tôi sử dụng, bất kể ranh giới và biến đổi ma trận:

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

Về cơ bản, nó tiết kiệm tình trạng hiện tại của bối cảnh, và rút ra một điểm ảnh trong suốt với copynhư globalCompositeOperation. Sau đó, khôi phục trạng thái bối cảnh trước đó.

Điều này làm việc cho pieChart của tôi trong 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

Tôi đã thấy rằng trong tất cả các trình duyệt mà tôi kiểm tra, cách nhanh nhất là thực sự fillRect với màu trắng hoặc màu trắng mà bạn muốn. Tôi có một màn hình rất lớn và ở chế độ toàn màn hình, ClearRect rất chậm, nhưng fillRect là hợp lý.

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

Hạn chế là vải không còn trong suốt.

trong webkit, bạn cần đặt chiều rộng thành một giá trị khác, sau đó bạn có thể đặt lại về giá trị ban đầu

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

Một cách đơn giản, nhưng không dễ đọc là viết cái này:

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

// after doing some rendering

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

Tôi luôn luôn sử dụng

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

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

điền vào hình chữ nhật đã cho bằng các giá trị RGBA:
0 0 0 0: với Chrome
0 0 0 255: với FF & Safari

Nhưng

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

hãy để hình chữ nhật đầy
0 0 0 255
bất kể trình duyệt!

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

Thí dụ: context.clearRect(0, 0, canvas.width, canvas.height);

con đường ngắn nhất:

canvas.width += 0

cách nhanh nhất:

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

Nếu bạn chỉ sử dụng ClearRect, nếu bạn có nó trong một hình thức để gửi bản vẽ của mình, bạn sẽ nhận được một bản gửi thay vì xóa, hoặc có thể xóa nó trước và sau đó tải lên một bản vẽ trống, vì vậy bạn cần thêm một bản vẽ Ngăn chặn Lỗi tại chức năng cầu xin:

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

Hy vọng nó sẽ giúp được ai đó.

Tôi luôn dùng cái này

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

GHI CHÚ

kết hợp ClearRect và requestAnimationFrame cho phép hoạt ảnh linh hoạt hơn nếu đó là những gì bạn sẽ làm

Đây là tất cả các ví dụ tuyệt vời về cách bạn xóa một khung vẽ tiêu chuẩn, nhưng nếu bạn đang sử dụng paperjs, thì điều này sẽ hoạt động:

Xác định một biến toàn cục trong JavaScript:

var clearCanvas = false;

Từ PaperScript của bạn xác định:

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

Bây giờ, bất cứ nơi nào bạn đặt ClearCanvas thành true, nó sẽ xóa tất cả các mục khỏi màn hình.