[javascript] HTML <canvas> 요소에서 앤티 앨리어싱을 끌 수 있습니까?

Program / 글쓴이

나는 <canvas>요소, 선 그리기 등을 가지고 놀고 있습니다 .

내 대각선이 앤티 앨리어싱 된 것으로 나타났습니다. 내가하는 일에 대해 재기 모양을 선호합니다.이 기능을 끄는 방법이 있습니까?

답변

이미지의 경우 .context.imageSmoothingEnabled= false

그러나 선 그리기를 명시 적으로 제어하는 ​​것은 없습니다. 당신은 당신의 자신의 선 (그릴 필요가 있습니다 어려운 방법을 사용) getImageData하고 putImageData.

답변

당신의 그리기 1-pixel와 같은 좌표에 줄을 ctx.lineTo(10.5, 10.5). 점 위에 1 픽셀 라인 드로잉 (10, 10)이 있다는 의미 1에서, 그 위치에서 화소에 도달 9.5하는 10.5어떤 캔버스 그려 질 두 라인을 초래한다.

0.51 픽셀 선이 많은 경우 그릴 실제 좌표에를 항상 추가 할 필요가없는 좋은 방법 ctx.translate(0.5, 0.5)은 처음에 전체 캔버스에 추가하는 것입니다.

답변

Mozilla Firefox에서 수행 할 수 있습니다. 코드에 다음을 추가하십시오.

contextXYZ.mozImageSmoothingEnabled = false;

Opera에서는 현재 기능 요청이지만 곧 추가 될 예정입니다.

답변

벡터 그래픽을 앤티 앨리어싱해야합니다.

앤티 앨리어싱은 정수가 아닌 좌표 (0.4, 0.4)를 포함하는 벡터 그래픽을 올바르게 플로팅하는 데 필요 합니다.

정수가 아닌 좌표가 주어지면 캔버스에는 두 가지 옵션이 있습니다.

  • 앤티 앨리어싱 -정수 좌표가 정수가 아닌 좌표 (즉, 반올림 오류)에서 얼마나 멀리 떨어져 있는지에 따라 좌표 주변의 픽셀을 페인트합니다.
  • 반올림 -정수가 아닌 좌표에 반올림 기능을 적용합니다 (예를 들어 1.4는 1이됩니다).

작은 그래픽 (반지름이 2 인 원)의 경우 곡선은 부드러운 곡선이 아닌 명확한 단계를 표시하지만 이후 전략은 정적 그래픽에 적용됩니다.

실제 문제는 그래픽이 변환 (이동) 될 때입니다. 즉, 한 픽셀과 다른 픽셀 사이의 점프 (1.6 => 2, 1.4 => 1)는 모양의 원점이 부모 컨테이너와 관련하여 점프 할 수 있음을 의미합니다 (계속 이동). 1 픽셀 위 / 아래 및 왼쪽 / 오른쪽).

몇 가지 팁

팁 # 1 : 캔버스 크기를 조정 (예 : x)하여 앤티 앨리어싱을 부드럽게 (또는 강화) 한 다음 (캔버스를 사용하지 않고) 형상에 상호 배율 (1 / x)을 직접 적용 할 수 있습니다.

비교 (배율 없음) :

몇 개의 직사각형

(캔버스 배율 : 0.75; 수동 배율 : 1.33) :

가장자리가 더 부드러운 동일한 직사각형

및 (캔버스 스케일 : 1.33; 수동 스케일 : 0.75) :

가장자리가 더 어두운 동일한 직사각형

팁 # 2 : 칙칙한 표정이 정말로 당신이 추구하는 것이라면, 각 모양을 몇 번 (지우지 않고) 그려보십시오. 그릴 때마다 앤티 앨리어싱 픽셀이 더 어두워집니다.

비교. 한 번 그린 후 :

몇 가지 경로

세 번 그린 후 :

경로는 동일하지만 더 어둡고 눈에 보이는 앤티 앨리어싱이 없습니다.

답변

Bresenham의 선 알고리즘과 같은 사용자 정의 선 알고리즘을 사용하여 모든 것을 그립니다. 이 자바 스크립트 구현을 확인하세요 :
http://members.chello.at/easyfilter/canvas.html

나는 이것이 당신의 문제를 확실히 해결할 것이라고 생각합니다.

답변

이미지를 축소하고 캔버스에 그릴 때 어려움이 있었는데, 업 스케일링시에는 사용하지 않았는데도 여전히 스무딩을 사용하고 있었다고 덧붙이고 싶습니다.

나는 이것을 사용하여 해결했습니다.

function setpixelated(context){
    context['imageSmoothingEnabled'] = false;       /* standard */
    context['mozImageSmoothingEnabled'] = false;    /* Firefox */
    context['oImageSmoothingEnabled'] = false;      /* Opera */
    context['webkitImageSmoothingEnabled'] = false; /* Safari */
    context['msImageSmoothingEnabled'] = false;     /* IE */
}

이 기능을 다음과 같이 사용할 수 있습니다.

var canvas = document.getElementById('mycanvas')
setpixelated(canvas.getContext('2d'))

누군가에게 유용 할 수도 있습니다.

답변

ctx.translate(0.5, 0.5);
ctx.lineWidth = .5;

이 콤보로 멋진 1px 선을 그릴 수 있습니다.