<canvas> 요소의 텍스트를 지우려면 어떻게해야합니까?

Question

<canvas> 태그 (이미지는 입력란에서 가져온 것임)에 이미지에 텍스트를 넣었습니다.

이제 <canvas>에 새 텍스트를 넣으면 이전 텍스트에 적용됩니다. 새 텍스트를 넣기 전에 캔버스에있는 기존 텍스트를 지우려면 어떻게합니까?

canvas.width을 지정하여 캔버스를 재설정하려고했지만 텍스트가 계속 켜져 있습니다. 도움이되는 사람들?

Answer 1

나는 다음 텍스트를 넣기 전에 이미지에서 텍스트를 지우는 방법을 모르겠습니다.

캔버스의 배경이 일정한 경우; 텍스트 만 변경하면 두 개의 캔버스 요소를 겹칠 수 있습니다. 배경과 텍스트를 삭제할 수있는 투명한 최상위 레이어 및 텍스트를 업데이트 할 때 삽입되는 새 레이어입니다.

Answer 2

새 텍스트를 그리기 전에 이미지를 다시 그려야합니다. 그것이 작동한다면

Answer 3

확실하지,하지만 당신은

Answer 4

당신은의 clearRect를 (X, Y, w, h)을 사용하는 데 필요한 배경 색상의 텍스트를 다시 그리는 시도 할 수 있습니다; MDC

Answer 5

에서 자세한 내용은 컨테이너의 HTML이

canvasHold.innerHTML="" 

그런 다음 새로운 캔버스로 교체

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

을 취소한다는 다른 사업부 또는 용기에 캔버스를 넣습니다. 새 텍스트로

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

다시 전송 새로운 캔버스

Answer 6

당신이 텍스트를 많이 추가하고 제거 할거야 알고 있다면, 그것은 기존의 텍스트를 추적하는 의미가 있습니다. 그러면 다음을 사용할 수 있습니다.

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

이렇게하면 매번 전체 캔버스를 다시 그릴 필요가 없습니다.

Answer 7

context.clearRect()를 사용하지만 먼저 지울 사각형을 찾아야합니다. 이는 텍스트의 크기 및 텍스트가 처음 그려 질 때의 캔바스 컨텍스트의 textAlign 속성과 같은 여러 가지 요소를 기반으로합니다. 아래의 코드는 x, y, 텍스트 크기, 가로 맞춤 등의 속성을 가진 캔버스 컨텍스트에 텍스트를 그리는 개체의 그리기 메서드에 해당합니다. 그리기 위해 항상 마지막으로 텍스트를 저장하므로 값이 다음에 변경 될 때 적절한 크기의 사각형을 지울 수 있습니다.

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

당신은 다른 솔루션은 두 개의 캔버스, 다른 이상 일해야 할 텍스트의 같은 지역에 명확하지 다른 도면 인 경우 :

<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>  

는 그런 다음에 대한 첫 번째를 사용할 수 있습니다 제거 할 필요가없는 정적 드로잉 및 동적 드로잉을 사용하는 정적 드로잉 귀하의 경우에는 다시 그리기 전에 텍스트를 동적 캔버스에 넣고 clearRect로 제거 할 수 있습니다.

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