HMTL5 앤티 앨리어싱 브라우저 비활성화

Question

브라우저 렌더링에 포함 된 기능을 비활성화 할 수 없기 때문에 HTML5 캔버스의 선, 두꺼운 선, 원, 사각형 등의 기본 기본 사항을 처리하는 라이브러리를 작성해야합니다. 핵심 캔버스 알고리즘

HTML5 캔버스 렌더링 프로세스를 처음부터 만들어야합니까? 내가 누구야, 나에게이 일을 맡길 사람이 있니? 누가 세상을 바꾸고 싶습니까?

HTML5로 작성된 간단한 그리기 응용 프로그램을 생각해보십시오 ... 모양을 그리십시오 ... 원형, 자유형, 원보다 양파와 같은 닫힌 모양 (글쎄, 그건 내 모습이 될 것입니다!) ... 그런 다음 페인트 통 아이콘을 선택하고 그린 모양을 클릭하여 원하는 색상으로 채울 것으로 예상하십시오.

"페인트 통"을 선택하고 모양 중간에 클릭하면 모양이 채워지는 것을 상상해보십시오.하지만, 그다지 ... ... HANG ON ...이게 옳지 않습니다! !! !! 그린 모양의 가장자리 안쪽에는 배경색과 채우기 색상 및 가장자리 색상 사이의 흐림 효과가 있습니다. 채우기에는 결함이있는 것 같습니다.

직선의 "페인트 통"/ "채우기"를 원했지만 ... 모양을 그려서 색상으로 채우기를 원했지만 ... 소란스럽지 않았습니다. 당신이 선택한 색깔로.

웹 브라우저는 모양을 정의하기 위해 선을 그릴 때 앤티 앨리어싱을 결정합니다. 모양에 검은 선을 그으면 ... 브라우저는 모서리를 따라 회색 픽셀을 그려서 더 좋은 선으로 보이게 만듭니다.

그래, 더 나은 라인은 * * 페인트/홍수 채우기 프로세스입니다.

브라우저 개발자가 앤티 앨리어싱 렌더링을 사용하지 않도록 속성을 노출하는 데 드는 비용은 얼마입니까? 비활성화하면 렌더링 엔진에 밀리 초가 절약됩니다.

바하마, Bresenham 라인 렌더링 알고리즘을 사용하여 내 캔버스 렌더링 엔진을 구축하고 싶지는 않습니다 ... 어떻게 될 수 있습니까? 변경 될 수있는 방법은 무엇입니까? ??? WC3를 겨냥한 청원서를 제출해야합니까? 관심이 있다면 당신의 이름을 포함 하시겠습니까 ??? 나는 야 -

업데이트]

function DrawLine(objContext, FromX, FromY, ToX, ToY) { 
    var dx = Math.abs(ToX - FromX); 
    var dy = Math.abs(ToY - FromY); 
    var sx = (FromX < ToX) ? 1 : -1; 
    var sy = (FromY < ToY) ? 1 : -1; 
    var err = dx - dy; 
    var CurX, CurY; 
    CurX = FromX; 
    CurY = FromY; 
    while (true) { 
     objContext.fillRect(CurX, CurY, objContext.lineWidth, objContext.lineWidth); 
     if ((CurX == ToX) && (CurY == ToY)) break; 
     var e2 = 2 * err; 
     if (e2 > -dy) { err -= dy; CurX += sx; } 
     if (e2 < dx) { err += dx; CurY += sy; } 
    } 
} 

Answer 1

2016/04 업데이트 링크

당신은 옵션으로, 8-bit이 (캔버스 (레트로 문맥을 대체) 면책 조항 사용할 수 있습니다 저자).

이 당신이 얻을 수있는 코드를 스스로 작성하는 실행 가능한 대안 인 경우이 수행하여 선, 원 등 :

HTML

<canvas id=c width=960 height=600 data-width=320 data-height=200></canvas> 

data-*은 선택하고 "기본을 나타냅니다를 " 해결책. getContext()의 옵션으로 설정할 수도 있습니다.자바 스크립트

var canvas = document.getElementById('c'), 
    ctx = canvas.getContext('8-bit');   // get retro context 

지금 당신이 선을 그릴 수 있고, 일반 2D 컨텍스트와 마찬가지로 동일한 속성과 메서드를 사용하여 꽤 구식 복고 스타일 픽셀 화 앤티 앨리어싱이없는 등 원.

ellipse(), drawImage() (팔레트 감소 및 디더링 포함) 등의 방법도 있습니다.

이 라이브러리는 "저해상도"로 복고풍으로 보이는 게임과 프로그램을 만들기위한 것입니다. 목표 인 경우 네이티브 보통 캔버스 에서처럼 전체 성능을 기대하거나 전체 크기 캔버스를 기본으로 사용하려는 경우

프로젝트는 GitHub at this link에 있습니다.

희망이 도움이됩니다.