베 지어 곡선을 동적으로 생성 하시겠습니까?

입방체 베지에 곡선을 사용하여 만든 직선에 잔디처럼 굽히기 위해 노력하고 있습니다. 베 지어 곡선을 사용하여 직선을 만들었으니 이제는 위로부터 구부릴 것입니다.하지만 제가 직면하고있는 문제는 나는 그것을 할 수 없다 동적으로. 내가 벤드를 만들기 위해 mousemove를 사용하는 순간, 일련의 커브가 캔버스에 원하는 모양이 아닌 페인트 같은 것을주는 것처럼 보입니다. 나는 단지 하나의 곡선을 원합니다. 내 질문 그려진 이전 선을 지우고 최신 굽은 곡선을 복원하는 방법은 무엇입니까 ?? 내 코드 : here is my code if you want to have a look at it 베 지어 곡선을 동적으로 생성 하시겠습니까?

출처

2013-05-27 Anonymous

서로의 상부에 적층 된 두 캔버스를 만든다.

이 방법을 사용하면 잔디가 그려진 영역을 지우는 것에 대해 걱정할 필요가 있습니다. (또한 항상 정적으로 다시 그릴 필요가 없기 때문에 훨씬 빠릅니다.)

두 개의 캔버스를 위치를 relative로 설정 한 div 안에 넣은 다음 절대 값을 position으로 설정하여 캔버스를 배치하십시오.

이제 정적 콘텐츠를 그리는 기능을 만들 수 있습니다 (브라우저 창의 크기가 조절되면 다시 그려야합니다.).

잔디가 그려지는 영역을 기록하고 다음 프레임의 각 잔디마다이 부분 만 지 웁니다. 이 마지막이 너무 복잡하면

, 그냥 "동적"캔버스에 단순 명확를 사용 : 당신이 좋아하는 경우는이 캔버스의 투명성, 또는 "레이어"를 유지합니다

ctxDyn.clear(0, 0, canvasDyn.width, canvasDyn.height);

실제 애니메이션을 수행하려면 requestAnimationFrame을 사용하십시오.

var isPlaying = true; 

function animate() { 

    ctxDyn.clear(0, 0, canvasDyn.width, canvasDyn.height); 

    drawGrass(); //function to draw the actual grass 

    if (isPlaying) requestAnimationFrame(animate); 
} 

animate(); // start

isPlaying

당신이 화면 또는 이와 유사한의 버튼으로 전환 할 수있는 플래그이다, 애니메이션을 중지 할 수 있습니다. 이 크로스 브라우저를 만드는 방법에 대해서는 requestAnimationFrame의 링크를 참조하십시오. 아직까지는 "젊은"구현이므로

dynCtx 및 dynCanvas 물론 원하는대로 부를 수 있습니다.

출처

2013-05-27 21:00:54 K3N

업데이트 된 "잔디"를 다시 그리기 전에 캔버스의 현재 내용을 지워야합니다. 이것은 캔버스에 "정적"인 다른 모든 것을 다시 그려야합니다. 예 :

function redraw() { 
    // Erase the current contents 
    ctx.fillStyle = 'white'; 
    ctx.fill(0, 0, canvas.width, canvas.height); 

    // Draw the stuff that does not change from frame to frame 
    drawStaticContent(); 

    // Draw the dynamic content 
    drawGrass(); 
}

mousemove 이벤트에서 잔디 곡선 정보를 업데이트 한 다음 다시 그립니다.

정적 콘텐츠 만 다른 동적 콘텐츠를 포함하는 첫 번째 :

출처

2013-05-27 14:49:27

베 지어 곡선을 동적으로 생성 하시겠습니까?

답변

관련 문제