HTML5 캔버스의 스케치 효과

Question

도시의 손으로 스케치 한 윤곽으로 구성된 JPEG 이미지가 있습니다. 빈 공간에서 왼쪽에서 오른쪽으로 윤곽선을 그리는 천천히 스케치하는 효과를 얻고 싶습니다. HTML5 canvas 요소를 기반으로 어떻게 할 수 있습니까? 이 JPEG를 캔버스에 가져 와서 일부 애니메이션 마스크를 적용하거나 JPEG를 커브 세트로 다시 팩터링하는 것 (가능한 경우 적절한 도구 목록을 얻고 싶을 때)을 사용하여이 선을 그립니다. 단순 바보 같은 ctx.lineTo (...) 및 다른 커브 함수.

미리 감사드립니다.

Answer 1

나는 캔버스에 애니메이션 손으로 그린 ​​선의 효과를 만드는 방법을 누군가에게 보여 주면서 돌아왔다. 드로잉 기술은 각 프레임의 이미지를 조금 더 끌어 들였습니다. 이것은 원하는대로 할 수있는 것처럼 보입니다. 즉 :

http://jsfiddle.net/GfGVE/28/ :

var amount = 1; 
function drawMore() { 
    ctx.clearRect(0,0,can.width, can.height); 
    ctx.drawImage(can2, 0, 0, can.width, amount, 0, 0, can.width, amount); 
    amount++; 
} 
setInterval(drawMore, 90); 

이미지의 아무도를 그릴 것, 그것은 픽셀의 맨 윗줄을 그릴 것, 그것은 가지고 살펴 등 픽셀, 상단의 두 행을 그릴 것입니다