HTML5 캔버스 - 같은 장소에서 그림을 그릴 때 제어 할 내용

이전 선과 같은 좌표로 선을 그리면 어떻게 될까요? 현재 색상이 밝아 지지만 동일한 색상을 유지하고 싶습니다 (또는 더 정확하게 - 두 번째 라인을 첫 번째 라인 상단에 놓기를 원합니다). HTML5 캔버스 - 같은 장소에서 그림을 그릴 때 제어 할 내용

내가하려고 노력 :

_context.setGlobalCompositeOperation(Composite.SOURCE_OVER);

을하지만 같은 캔버스에 그릴 때, 캔버스에 캔버스 그리기하지 않을 경우에만 작동하는 것 같다.

출처

2012-12-06 Erik Sapir

문제는 명확하지 않지만 사용하는 색상의 알파 또는 [퍼지 좌표]와 관련 될 수 있습니다 (http://stackoverflow.com/questions/10373695/drawing-lines-in-canvas-but- 마지막 - 것 - 퇴색) 거의 동일한 효과로 이어집니다. –

내가 그릴 때마다 항상 ints를 사용합니다. 알파 레벨은 항상 FF –

입니다. * "내가 그릴 때 항상 int를 사용합니다."* : 그건 당신 문제입니다. 그러지 마세요. 아래 내 대답을 참조하십시오. –

색상이 완전 알파 인 경우에는 정수 좌표에 너비 1의 선을 그은 것과 관련된 문제 일 수 있습니다. 다음 바이올린에서

봐 : http://jsfiddle.net/RAgak/

정수에 그리기 좌표는 라인 넓게 퍼지합니다. 그리고 두 번째 그림을 그리면 더 밝아집니다. 하지만 반 정수 좌표로 선을 그릴 때 이런 일은 발생하지 않습니다.

var y = 10; 
c.beginPath(); 
c.moveTo(0, y); 
c.lineTo(30, y); 
c.stroke(); // fuzzy 
c.beginPath(); 
c.moveTo(50, y+0.5); 
c.lineTo(80, y+0.5); 
c.stroke(); // ok

사실 이는 선이 모든 픽셀 위에 그려지고 있기 때문입니다 (캔버스 위치 지정이 부동 상태 인 경우). 당신이 캔버스에 자바 스크립트에서 정확한 수직 또는 수평 라인을 그릴 때, 당신은 반 int에 그들을 가지고하는 것이 좋습니다.

그림보기 : 첫 번째 수평선은 y 위치 1로 그려졌습니다.이 선은 흐릿하고 넓습니다. 두 번째 수평선은 y 위치가 4.5로 그려졌습니다. 그것은 얇고 정밀합니다.

enter image description here

용액을 수평 또는 수직 라인 (또는의 구형)을 드로잉 할 때, 적어도, 고려 라인의 폭을 가지고 정수 또는 반정 수 좌표에 그리는 것이다.

출처

2012-12-06 09:31:10

이것은 문제가되지 않습니다. 절반의 솔루션을 시도했지만 결과는 같습니다. 또한 전역 알파가 1.0인지 확인했습니다. –

문제는 빨간색 선을 x1, y1에서 x2, y2로 그리고 동일한 선을 다시 그리는 것보다 색이 밝아지는 문제입니다. –

내 피들보기 : http://jsfiddle.net/RAgak/1/. 너비가 1 인 행은 정수 좌표 (수평 또는 수직선)를 그리는 경우에만 발생합니다. –

HTML5 캔버스 - 같은 장소에서 그림을 그릴 때 제어 할 내용

답변

관련 문제