캔버스에서 개체를 제거하는 방법은 무엇입니까?

나는 캔버스를 사용하여 타코미터에서 바늘을 회전시키는이 스크립트를 만들고 있습니다. 나는이 캔버스에 초보자입니다.캔버스에서 개체를 제거하는 방법은 무엇입니까?

function startup() { 
    var canvas = document.getElementById('canvas'); 
    var context = canvas.getContext('2d'); 
    var meter = new Image(); 
    meter.src = 'background.png'; 
    var pin = new Image(); 
    pin.src = 'needle.png'; 
    context.drawImage(meter,0,0); 
    context.translate(275,297); 
    for (var frm = 0; frm < 6000; frm++){ 
    var r=frm/1000;    //handle here         
    var i=r*36-27; //angle of rotation from value of r and span 
    var angleInRadians = 3.14159265 * i/180; //converting degree to radian     
    context.rotate(angleInRadians); //rotating by angle 
    context.drawImage(pin,-250,-3); //adjusting pin center at meter center 
    } 
}

행동의 스크립트입니다 : 당신이 볼 수

http://www.kingoslo.com/instruments/

문제는 붉은 바늘이 각 루프 beetween 제거되지 않는다는이며, 이것은 내 코드입니다.

내가해야 할 일은 루프의 각 사이클 사이에 핀 객체의 캔버스를 지우는 것입니다. 어떻게해야합니까?

감사합니다.

종류와 관련,
마리우스

출처

2010-12-26 Marius Jonsson

_retained-drawing mode_ 시스템과 유사한 HTML 또는 SVG는 그려진 요소와 관련된 특정 객체를 유지하지만 _non-retained-drawing mode_ 시스템과 유사한 HTML Canvas는 그렇지 않습니다. SVG를 사용하면 사실 이후에 요소 나 문서를 수정하고 다시 그릴 수 있습니다. HTML Canvas를 사용하면 모든 객체를 직접 추적하고 출력을 변경하려는 경우 필요한 것을 다시 그려야합니다. – Phrogz

사용 clearRect 캔버스 (그 중 일부 또는 전체를) 취소합니다. HTML canvas 개체는 픽셀의 평면 비트 맵이므로 캔버스에 "개체"라는 개념이 없습니다.

또한 JavaScript가 단일 스레드이므로 for 루프가 바늘에 애니메이션을 적용하지 않는다는 점을 명심하십시오. 브라우저가 실제로 완료되면 모든 업데이트를 그립니다. 브라우저가 실제로 최신 상태로 표시 캔버스를 새로 고칩니다. .

애니메이션을 적용하려면 렌더링 루프를 만들어야합니다. Dev.Opera에는 framerate control에 관한 기사가 있습니다. 시작해야만합니다. 그런 다음 각 프레임에 바늘을 움직이면됩니다.

출처

2010-12-27 00:06:57

첫 번째 링크가 변경되었습니다. https://developer.mozilla.org/en-US/docs/Canvas_tutorial/Drawing_shapes –

첫 번째 링크가 변경되었지만 다시 : https://developer.mozilla.org/en-US/docs/ 웹/API/Canvas_API/Tutorial/Drawing_shapes –

간단한 답 : 캔버스를 직각으로 다시 그립니다.

context.clearRect()를 사용하거나 캔버스 너비를 같은 값으로 설정합니다 (캔버스를 지우는 값으로 변경).

빠르며 바늘 만 움직일 방법이 없습니다. 모든 캔버스 소재는 그런 식으로 제작됩니다.

그리기. 변화? 다시 그리기.

출처

2010-12-27 01:03:37 shfx

정적 배경 이미지를 사용 중이며 바늘 만 동적 인 경우 여러 캔버스를 사용할 수 있습니다. css를 사용하여 서로의 위에 놓습니다. 타코미터 이미지를 뒷면의 캔버스에 추가하십시오. 상단 캔버스에 바늘 스크립트를 적용하십시오. 이렇게하면 바늘을 업데이트 할 때마다 이미지를 다시 그릴 필요가 없습니다. 그리고 다른 대답은 다시 그리기가 문맥을 명확하게하고 바늘을 다시 그립니다.

출처

2011-11-09 21:16:04

캔버스에서 개체를 제거하는 방법은 무엇입니까?

답변

관련 문제