Loại bỏ một hình ảnh từ một canvas trong HTML5

Question

có là một ví dụ, mà tải 2 hình ảnh:

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

    var img1 = new Image(); 
    img.src = "/path/to/image/img1.png"; 
    img.onload = function() { 
     ctx.drawImage(img, 0, 0); 
    }; 

    var img2 = new Image(); 
    img2.src = "/path/to/image/img2.png"; 
    img2.onload = function() { 
     ctx.drawImage(img2, 100, 100); 
    }; 

tôi cần phải loại bỏ (thay thế) img2 từ vải. cách tốt nhất để làm điều đó là gì?

Answer 1

Không rõ bạn muốn canvas hiển thị khi hình ảnh biến mất. Nếu bạn muốn nó được trong suốt, bạn có thể nhận được các dữ liệu hình ảnh và điền nó với điểm ảnh trong suốt:

var img = ctx.createImageData(w, h); 
for (var i = img.data.length; --i >= 0;) 
    img.data[i] = 0; 
ctx.putImageData(img, 100, 100); 

nơi "w" và "h" sẽ là chiều rộng và chiều cao của hình ảnh ban đầu của bạn.

chỉnh sửa — nếu bạn chỉ muốn một hình ảnh khác ở đó, tại sao không chỉ đặt một hình ảnh ở đó? Nó sẽ ghi đè lên bất kỳ điểm ảnh nào trên canvas.

Answer 2

Tôi nghĩ có thể bạn hiểu nhầm Canvas là gì.

Canvas thực chất là mạng lưới pixel 2 chiều dọc theo trục 'X' và trục 'Y'. Bạn sử dụng API để vẽ các pixel trên canvas đó, vì vậy khi bạn vẽ một hình ảnh, bạn sẽ vẽ các pixel tạo nên hình ảnh đó lên khung hình của bạn. Lý do KHÔNG có phương pháp cho phép bạn chỉ cần xóa một hình ảnh, là vì Canvas không biết có một hình ảnh ở đó đầu tiên, nó chỉ nhìn thấy các pixel. Điều này không giống như DOM HTML (Mô hình đối tượng tài liệu), nơi mọi thứ đều là một phần tử HTML, hoặc một 'điều' thực tế mà bạn có thể tương tác với, các sự kiện kịch bản hook-up, v.v. vẽ lên Canvas. Khi vẽ một 'vật' lên Canvas, thứ đó không trở thành thứ bạn có thể nhắm vào hoặc móc vào, nó chỉ là điểm ảnh. Để có được một 'điều', bạn cần đại diện cho 'thứ' của bạn theo một cách nào đó như đối tượng JavaScript, và duy trì một bộ sưu tập các đối tượng JS này ở đâu đó. Cách thức hoạt động của trò chơi Canvas. Việc thiếu cấu trúc giống như DOM cho Canvas giúp hiển thị rất nhanh, nhưng có thể là một nỗi đau khi triển khai các phần tử giao diện người dùng mà bạn có thể dễ dàng kết nối và tương tác, xóa, v.v. Bạn có thể thử dùng SVG.

Để trả lời câu hỏi của bạn, chỉ cần vẽ một hình chữ nhật lên Canvas bao gồm hình ảnh của bạn bằng cách sử dụng cùng một dây đồng X/Y và kích thước bạn đã sử dụng cho hình ảnh gốc hoặc thử giải pháp của Pointy. 'Che đậy' có lẽ là thuật ngữ sai, vì bạn thực sự thay thế các pixel (không có lớp nào trong Canvas).

Answer 3

Nếu nội dung "Sunday Ironfoot" nói đúng, thì cách tốt nhất để xóa hình ảnh là vẽ hình ảnh một lần nữa từ đầu. Đối với điều này, bạn cần phải có một loạt các hình ảnh và chỉ vẽ những hình ảnh bạn sử dụng. Ví dụ:

function EmptyClass{}; 
var img=new Array(); 
img[0]=new EmptyClass; 
img[0].i=new Image(); 
img[0].src="yourfile1.jpg"; 
img[0].enabled=true; 

img[1]=new EmptyClass; 
img[1].i=new Image(); 
img[1].src="yourfile2.jpg"; 
img[1].enabled=false;// <-------- not enabled, should not be drawn equivalent to removing 


img[2]=new EmptyClass; 
img[2].i=new Image(); 
img[2].src="yourfile3.jpg"; 
img[2].enabled=true; 

for(var i=0;i<3;i++){ 
if(img[i].enabled)ctx.drawImage(img[i], 100, 100); 
} 

P.S. Tôi đang tạo một công cụ cho canvas javascript. Sẽ đăng nó trong vòng một tuần

Hòa bình

Answer 4

Can bạn đối tượng canvas overlay (Tôi đoán tôi nên thử trước khi hỏi, bạn có thể -1 một tôi cho là lười biếng). Tôi đoán tôi muốn được quan tâm đến có một yếu tố canvas như là một nền tảng, và sau đó là một đối tượng lớp mà bật trong và ngoài tầm nhìn. Có thể hiệu quả hơn một chút sau đó phải vẽ lại mọi hình ảnh nếu ảnh bị xóa hoặc di chuyển. Tôi sẽ chơi xung quanh và xem những gì tôi có thể tìm thấy.

Answer 5

Bạn có thể sử dụng hàm clearRect() để xóa khu vực hình ảnh.Thay vào đó, xóa toàn bộ ngữ cảnh, bạn chỉ có thể xóa khu vực hình ảnh bằng cách sử dụng hình ảnh này:

ctx.clearRect(xcoordinate_of_img1,ycoordinate_of_img1,xcoordinate_of_img1 + img1.width ,ycoord_of_img1 +img1.height); 

Answer 6

Không giống như vẽ bản thân, nếu bạn thay thế hình ảnh trên canvas, hình cũ vẫn còn đó.

Canvas c2; 
... 
     if (null != Image2) { 
      var ctx = c2.getContext("2d"); 
      ctx.clearRect(0, 0, c2.width, c2.height); 
     }