HTML에서 앤티 앨리어싱을 끌 수 있습니까?

HTML에서 앤티 앨리어싱을 끌 수 있습니까? 요소?

---

나는 <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 선을 그릴 수 있습니다.

---

Notice a very limited trick. If you want to create a 2 colors image, you may draw any shape you want with color #010101 on a background with color #000000. Once this is done, you may test each pixel in the imageData.data[] and set to 0xFF whatever value is not 0x00 :

imageData = context2d.getImageData (0, 0, g.width, g.height);
for (i = 0; i != imageData.data.length; i ++) {
    if (imageData.data[i] != 0x00)
        imageData.data[i] = 0xFF;
}
context2d.putImageData (imageData, 0, 0);

The result will be a non-antialiased black & white picture. This will not be perfect, since some antialiasing will take place, but this antialiasing will be very limited, the color of the shape being very much like the color of the background.

---

Just two notes on StashOfCode's answer:

1. It only works for a grayscale, opaque canvas (fillRect with white then draw with black, or viceversa)
2. It may fail when lines are thin (~1px line width)

It's better to do this instead:

Stroke and fill with #FFFFFF, then do this:

imageData.data[i] = (imageData.data[i] >> 7) * 0xFF

That solves it for lines with 1px width.

그 외에도 StashOfCode의 솔루션은 자체 래스터 화 함수를 작성할 필요가 없기 때문에 완벽합니다 (선뿐만 아니라 베 지어, 원형 호, 구멍이있는 채워진 다각형 등을 생각해보십시오.).

참고 URL : https://stackoverflow.com/questions/195262/can-i-turn-off-antialiasing-on-an-html-canvas-element