Javascript/jQuery: xóa hình dạng/đường dẫn khỏi canvas

Question

Tôi dường như không thể tìm thấy hàm để xóa hình dạng hoặc đường dẫn khỏi canvas sau khi đã được tạo.

Vì vậy, tôi tạo ra một đường cong Bezier giữa 2 điểm với

beginPath(); 
bezierCurveTo(); 
stroke(); 
closePath(); 

Làm thế nào tôi có thể loại bỏ điều này từ vải khi nó đã được tạo ra? Tôi cần có thể gọi chức năng xóa qua toggle() và blur(). Tôi chắc chắn có điều gì đó tồn tại cho việc này ...

Cảm ơn bạn đã giúp đỡ!

Answer 1

Cảm ơn cho đầu vào tuyệt vời để tất cả các bạn - nó đã giúp tôi tìm ra giải pháp:

context.clearRect(x,y,w,h); 

(link)

này sẽ xóa bất cứ thứ gì trong phạm vi hình chữ nhật đó.

Tôi đã tìm thấy phương pháp trên trang tôi tìm thấy trong khi tìm kiếm câu trả lời của ILog để lưu/khôi phục ngữ cảnh và tất cả đều ở đó. Cảm ơn một lần nữa.

Answer 2

Theo như tôi nhớ đặc tả, bạn phải gọi context.save() trước khi vẽ, sau đó vẽ một cái gì đó, và sau đó gọi context.restore() để trở về trạng thái trước đó.

Answer 3

Bạn không thể xóa đường dẫn/hình dạng khỏi canvas. Bạn có thể vẽ một cái gì đó khác trên đó hoặc xóa canvas.

Answer 4

Bạn có thể thử sử dụng SVG thay vì canvas. Có một thư viện tuyệt vời được gọi là Raphaël giúp làm việc với SVG dễ dàng. Nó cũng hoạt động trong tất cả các trình duyệt, bao gồm IE6.

Với SVG mỗi hình dạng là phần tử riêng của nó có thể được di chuyển, chuyển đổi hoặc xóa.

Answer 5

Nếu bạn đang sử dụng JQuery:

var elem = $("selector"); 
var canvas = elem.get(0); 
var context = canvas.getContext("2d"); 

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

Thay thế "selector" với selector JQuery thực tế của bạn.

Answer 6

Để xóa canvas của bạn, sử dụng đoạn mã sau

canvas_context.clearRect(0,0,canvas_1.width,canvas_1.height); 

Luôn luôn sử dụng beginPath phương pháp khi bạn đang bắt đầu để vẽ một con đường mới và closePath phương pháp sau khi bạn đã hoàn thành bản vẽ con đường của bạn.

LƯU Ý:Đường dẫn không được đóng không thể xóa.

Nếu đường dẫn của bạn không bị xóa, đó phải là vì lý do trên.

Tất cả các con đường phải bắt đầu bằng beginPath() và kết thúc bằng closePath()

Ví dụ:

 canvas_context.beginPath(); 
    canvas_context.moveTo(x1,y1); 
    canvas_context.lineTo(x2,y2); 
    canvas_context.stroke(); 
    canvas_context.closePath(); 

Các mã sau đây cũng sẽ xóa canvas của bạn

canvas_1.width = canvas_1.width; 

GHI CHÚ:Câu lệnh trên sẽ khởi tạo lại một canvas do đó nó sẽ xóa canvas. Bất kỳ câu lệnh nào reinitializes canvas sẽ xóa một canvas.

Answer 7

Đây là điều quan trọng cần nhận ra về <canvas>. Đó là một hình ảnh phẳng tạo thành các điểm ảnh. Sau khi một cái gì đó được rút ra cho nó, nó được sáp nhập vào lưới pixel và không thể được phân biệt với các pixel khác.

Nếu bạn cần để có thể tách các yếu tố hình ảnh mà bạn có thể:

1. Overlay <canvas> yếu tố vào một chồng lớp
2. Sử dụng <svg> trong đó mỗi yếu tố hình ảnh khác với các yếu tố khác và có thể được thao tác độc lập

Bạn có thể xem <canvas> là một lớp trong PhotoShop/Gimp/Fireworks hoặc tài liệu MSPaint.

Bạn có thể xem <svg> làm tài liệu trong Illustrator/InkScape.

Answer 8

Hãy thử điều này:

ctx.save(); 
ctx.globalCompositeOperation = "destination-out"; 
// drawing here you path second time 
ctx.restore(); 

"Thuộc tính globalCompositeOperation đặt như thế nào hình dạng và hình ảnh được vẽ lên bitmap đầu" specs

Làm thế nào nó hoạt động bạn có thể thấy here.