Làm cách nào để xóa văn bản khỏi phần tử <canvas>?

Question

Tôi đã đặt văn bản lên hình ảnh trong thẻ <canvas> (văn bản được lấy từ hộp nhập).

Bây giờ, nếu tôi đặt văn bản mới trên <canvas>, nó được áp dụng trên văn bản trước đó. Làm cách nào để xóa văn bản hiện có trên canvas trước khi đưa vào văn bản mới?

Tôi đã thử đặt lại canvas bằng cách gán canvas.width nhưng văn bản vẫn bật. Có người giúp gì không?

Answer 1

Tôi không chắc chắn về cách xóa văn bản khỏi hình ảnh trước khi bạn đặt đoạn văn bản tiếp theo.

Nếu nền của canvas không đổi; và chỉ thay đổi văn bản, bạn có thể xếp hai phần tử canvas. Nền và lớp trên cùng trong suốt cho văn bản có thể được xóa và một văn bản mới được chèn vào khi bạn muốn cập nhật văn bản.

Answer 2

Bạn sẽ cần phải vẽ lại hình ảnh trước khi vẽ văn bản mới.

Answer 3

không chắc chắn nếu nó sẽ làm việc, nhưng bạn có thể thử vẽ lại văn bản trong màu nền

Answer 4

Bạn cần phải sử dụng clearRect (x, y, w, h); Xem thêm chi tiết tại MDC

Answer 5

Đặt vải trong một container div hoặc khác

<div id=canvasHold><canvas id=myCanvas></canvas></div> 

Rõ ràng rằng HTML container

canvasHold.innerHTML="" 

Sau đó thay thế nó bằng một tấm vải mới.

canvasHold.innerHTML="<canvas id=myCanvas></canvas>" 

Nộp lại bài Canvas mới với văn bản mới

Answer 6

Nếu bạn biết bạn sẽ được thêm và loại bỏ văn bản rất nhiều, nó có thể làm cho tinh thần để theo dõi các văn bản cũ. Sau đó, bạn chỉ có thể sử dụng điều này:

context.fillStyle = '#ffffff'; // or whatever color the background is. 
context.fillText(oldText, xCoordinate, yCoordinate); 
context.fillStyle = '#000000'; // or whatever color the text should be. 
context.fillText(newText, xCoordinate, yCoordinate); 

Bằng cách này bạn không phải vẽ lại toàn bộ khung hình mỗi lần.

Answer 7

Bạn sử dụng context.clearRect(), nhưng trước tiên bạn phải tìm hình chữ nhật để xóa. Điều này dựa trên một số yếu tố, chẳng hạn như kích thước của văn bản và thuộc tính textAlign của bối cảnh canvas khi văn bản ban đầu được vẽ. Đoạn mã dưới đây sẽ cho phương thức vẽ của đối tượng vẽ văn bản vào ngữ cảnh canvas, vì vậy nó có các thuộc tính cho x, y, cỡ chữ, căn chỉnh ngang vv Lưu ý rằng chúng tôi luôn lưu trữ đoạn văn bản cuối cùng được vẽ để chúng tôi có thể xóa hình chữ nhật có kích thước thích hợp khi giá trị được thay đổi tiếp theo.

this.draw = function() { 
    var metrics = this.ctx.measureText(this.lastValue), 
     rect = { 
     x: 0, 
     y: this.y - this.textSize/2, 
     width: metrics.width, 
     height: this.textSize, 
     }; 

    switch(this.hAlign) { 
    case 'center': 
     rect.x = this.x - metrics.width/2; 
     break; 
    case 'left': 
     rect.x = this.x; 
     break; 
    case 'right': 
     rect.x = this.x - metrics.width; 
     break; 
    } 

    this.ctx.clearRect(rect.x, rect.y, rect.width, rect.height); 

    this.ctx.font = this.weight + ' ' + this.textSize + ' ' + this.font; 
    this.ctx.textAlign = this.hAlign; 
    this.ctx.fillText(this.value, this.x, this.y); 
    this.lastValue = this.value; 
} 

Answer 8

Nếu bạn có thể vẽ khác không rõ ràng ở cùng khu vực của văn bản, một giải pháp khác là phải có hai canvas, một trong khác:

<div style="position: relative;"> 
    <canvas id="static" width="1350" height="540" style="position: absolute; left: 0; top: 0; z-index: 1;"></canvas> 
    <canvas id="dynamic" width="1350" height="540" style="position: absolute; left: 0; top: 0; z-index: 0;"></canvas> 
</div>  

Sau đó, bạn có thể sử dụng đầu tiên cho các bản vẽ tĩnh không cần phải xóa và bản vẽ còn lại có bản vẽ động. Trong trường hợp của bạn, bạn có thể đặt văn bản trong khung hình động và xóa nó bằng clearRect trước khi vẽ lại.

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