직사각형 청소

캔버스에 직사각형을 그려주는 스크립트에 함수가 있습니다. "if"조건에서 사각형 그리기를 정리하고 싶습니다. 캔버스에 텍스트 (좌표는 0,80)가 있으며 청소하면 안됩니다. 직사각형 만 청소해야합니다.직사각형 청소

function red_stroke_2(yy) 
{ 
    //Red color edges 
    context.strokeStyle = "#f00"; 
    context.strokeRect(0,yy,800,40); 
} 
if (Option1==answers[qnumber]) 
{ 
    red_stroke_2(80); 
}

출처

2013-03-09 user1942359

context.clearrect? 그걸 시도하고 있니? –

캔버스는 그려진 기본 요소 나 호출에 대해 알지 못하기 때문에 "상태 비 저장"입니다. 이와 같이 특정 도면 호출 만 실행 취소하는 것은 불가능합니다. 도면을 수정해야하는 경우 변경하지 않으려는 모든 항목을 다시 그려야합니다. 물론 단일 픽셀을 변경할 수있는 옵션이 있으므로 텍스트가 검정색이고 사각형이 빨간색이면 모든 빨간색 픽셀을 바꿀 수 있지만 안티 앨리어싱이 활성화되어 있으면 완전히 복잡하지는 않습니다.

그래서 전체 영역을 다시 그립니다 (사각형 그리기는 생략하고 텍스트를 렌더링). 또는 2 개의 캔버스를 서로 겹쳐서 사용하는 것을 고려해보십시오. 하나는 텍스트가 있고 다른 하나는 배경이 있습니다. 그런 다음 텍스트를 걱정하지 않고 배경을 다시 렌더링 할 수 있습니다.

마지막으로 중요한 것은 SVG를 사용하는 것입니다. 이는 상태 유지이며 수정/삽입/제거 할 수있는 DOM 요소로 구성되어 있으며 브라우저가 합성을 수행하기 때문에 대안이 될 수 있습니다. 이 경우 rect 요소와 text 요소가 있으며 단순히 이전 요소를 제거 할 수 있습니다.

출처

2013-03-09 12:12:21 Sebastian

Sebastian에게 감사드립니다. 그것은 저에게 새로운 아이디어를 제공합니다. – user1942359

이 대신 사각형의 투명한 픽셀을 넣어 것입니다 :

function clean_red_stroke(yy) 
{ 
    context.clearRect(0,yy,800,40); 
} 
//Call it with the same 'yy' you used in the drawing method 
clean_red_stroke(80);

그러나 내가 코드를 개선 할 수있는 당신을 생각 exemple를 위해 (결과적과 가장 일반적인 기능) 이상의 변수를 사용하여.

출처

2013-03-09 12:14:20

직사각형 청소

답변

관련 문제