HTML5 캔버스에서 strokeRect() 지우기

Question

내 캔버스에 테두리가있는 정사각형을 완벽하게 그릴 수 있습니다. 그러나 clearRect() 함수를 사용하여이 정사각형 테두리 모양을 지우려고하면 일부 획이 지워지지 않습니다.

HTML

<div> 
    <canvas width="300" height="250"> 
    </canvas> 
</div> 

var $context = $('canvas')[0].getContext('2d'); // Create 4 filled squares $context.fillStyle = 'pink'; $context.fillRect(120, 0, 30, 30); $context.fillRect(120, 30, 30, 30); $context.fillRect(150, 0, 30, 30); $context.fillRect(150, 30, 30, 30); // Create borders around them $context.strokeRect(120, 0, 30, 30); $context.strokeRect(120, 30, 30, 30); $context.strokeRect(150, 0, 30, 30); $context.strokeRect(150, 30, 30, 30); // Now erase the squares (individually) $context.clearRect(120, 0, 30, 30); $context.clearRect(120, 30, 30, 30); $context.clearRect(150, 0, 30, 30); $context.clearRect(150, 30, 30, 30); 

JS

jsFiddle here를 참조하십시오.

더 자세히 살펴본 후에 clearRect() 함수는 실제로 내 strokeRect() 호출에서 획을 지우지 않는 것으로 보입니다. 그래서 생각하고 있었는데, 아마도 내가해야 할 일은 strokeStyle이 ‘white’ 인 경계를 그리는 것입니다. 그러나, 내가 이것을 할 때 (새로운 바이올 here), 이것은 하얀 획을 페인트하지만 128의 알파 값으로 만 보인다! 내 globalAlpha이 1로 설정되었습니다 ... 완전히 불투명하지 않아야합니까?

여기서는 무엇을 이해하지 못하겠습니까? clearRect()은 strokeRect()에 대한 통화가 명확하지 않습니까? 그리고 만약 아니라면, 솔루션은 기존의 strokeRect()을 덮어 쓰지 만 흰색의 색을 사용해야합니까?

캔버스를 지우는 것만으로는 안되지만 한 번에 한 칸씩 지워야합니다.

미리 감사드립니다.

Answer 1

정상적으로 작동하고 있습니다. 테두리는 strokeRect을 통해 lineWidth과 같은 모양으로 높이와 너비를 추가합니다. clearRect은 멋진 기능이 아니며 지우개처럼 작동합니다. 지정한 영역에서만 "페인트"가 제거됩니다. 당신의 예에서

는 lineWidth 당신의 코드는 30x30의 사각형을 그립니다 (1)의 기본이며, 다음 폭 1. 결과 모양의 스트로크를 통해 테두리를 적용 32 × 32이다 - 1 + 30 + 1

의 결과

이 모든 일을 취소하려면 수학을 조금 조정할 필요가 :

$context.clearRect(119, -1, 32, 32); 
$context.clearRect(119, 29, 32, 32); 
$context.clearRect(149, -1, 32, 32); 
$context.clearRect(149, 29, 32, 32); 

이 y 좌표뿐만 아니라뿐만 아니라 국경을 커버하는 투명의 크기를 증가 한 x와 하나 위로 이동 모양 그 자체.

jsfiddle은 : http://jsfiddle.net/fg6fmjhb/2/

Answer 2

또한이 작업을 수행 할 수 있습니다

$context.clearRect(0, 0, canvas.width, canvas.height); 

이 완전히 캔버스 컨텍스트를 지 웁니다.