html5 캔버스에서 텍스트를 천천히 채우는 방법

Question

캔버스에 흰색 텍스트가 있습니다. 나는 천천히 그리고 매끄럽게 텍스트를 다른 색상 (빨간색)으로 왼쪽에서 오른쪽으로 채울 수 있기를 원합니다. 이것을 할 수있는 방법이 있습니까? 때때로 문자는 분수에 흰색이고 반대쪽에는 빨간색이됩니다.

"색상"이라는 단어를 사용한 예.

"Col"은 빨간색입니다. 다음 "o"는 빨간색 (왼쪽)이 25 %이고 흰색 (오른쪽)이 75 %입니다. "r"은 완전 흰색입니다. 모든 도움

업데이트

감사합니다. clip 객체 앞에 ctx.beginPath()를 추가하면 더 잘 작동하는 것으로 나타났습니다.

저는 약간의 아이디어를 추가하고 현재 프로젝트에서 제대로 작동하는 작은 js 개체를 만들었습니다. 가장 우아한 js가 아닐지도 모르지만 나중에이 작업을 원하는 다른 사람을 돕기를 바랍니다. 필자가 텍스트가 채워지기를 시작할 때 텍스트의 크기가 변하는 것을 확인한 약간의 문제가 있습니다. 그 이유는 확실하지 않습니다. http://jsfiddle.net/WRAFA/4/

Answer 1

복합 작업 소스 인으로이 작업을 수행 할 수 있습니다. 복합 작업 소스를 사용하여 배경색 (흰색)으로 텍스트를 처음 그린 다음 그 위에 텍스트와 사각형 사이의 유일한 교차점에 색칠 된 채색 선을 그립니다. 나는 작은 예제를 만들었습니다 jsfiddle

Answer 2

리차드의 바이올린 수정에 대한 좋은 직장. 나는 몇 가지 개선을했습니다.

1. 검은 색 캔버스 배경에 흰색 텍스트를 요청했습니다.
2. setInterval의 사용은 권장하지 않습니다. 당신은 무승부를 영원히 그리고 영원히 계속하고 있습니다. 나는 캔버스의 가장자리에 도착하자마자 draw 이벤트를 멈추도록 setTimeout을 사용하기 위해 바이올린을 고쳤습니다.

조정 된 바이올린은 내가하지만, 추천 http://jsfiddle.net/d4Jef/1/

한 가지이다. 합성을 사용하는 대신 클리핑 영역을 사용하여 텍스트를 작성해야합니다. source-in 합성 문제는 텍스트가 불투명 한 픽셀 이미지로 작성된 경우이를 통해 직사각형을 채우면 배경이 날아갈 수 있습니다. 캔버스에 다른 것을 가지고 있지 않았기 때문에 여기에서 벗어났습니다. 을 제외하고는 텍스트를 제외하고 말입니다. 따라서 클리핑 영역으로 이동하는 것이 좋습니다. http://jsfiddle.net/5ZgNz/2/

참고이 방법은 일반적으로 작동하는 강조하기 위해 추가로 녹색 사각형의 사용 : 여기

는 클리핑 접근 버전입니다.