고전적인 흐림 문제가 있지만 작동하는 해결책을 찾지 못함

Question

그래서 우리는 모두 윤곽선이 약간 희미하게 그려지는 문제를 안다. easeljs 단계를 사용하는 경우

context.sRect=function(x,y,w,h){ 
x=parseInt(x)+0.50; 
    y=parseInt(y)+0.50; 
    this.strokeRect(x,y,w,h); 
} 
context.fRect=function(x,y,w,h){ 
    x=parseInt(x); 
    y=parseInt(y); 
    context.fillRect(x,y,w,h); 
} 

그러나, 이러한 방법들은 모두에 어떤 영향을 해달라고 모양을 흐리게 유지 : 다음과 같은 방법으로 일반 JS 캔버스를 사용할 때 더 문제없이 문제를 해결할 수 있었다. 나는 또한 x와 y뿐만 아니라 너비와 높이를 -0.5만큼 offsetRect(); 그것도 그 일을하지 못했습니다. 내가 시도한 마지막 것은 stage.regX와 stage.regY를 -.5로 설정하여 출력을 변경했지만 변경된 흐림 (약간 흐리게) 만 변경했습니다. 내가 뭔가를 놓쳤습니까?

추신 : 항상 동일한 너비와 높이 (200 * 200)를 갖지만 동시에 화면을 채울 캔버스가 필요합니다. 나는 항상 canvas.width/height를 200으로 설정하고 canvas의 CSS를 100 %로 설정하여이 작업을 수행합니다.

Answer 1

간단한 답 : 할 수 없습니다.

캔버스의 크기를 조절할 때 CSS를 사용하면 캔버스의 각 픽셀을 개별적으로 조정한다고 생각할 수 있습니다. 이 때문에 브라우저 자체의 앤티 앨리어싱을 방지해야합니다.

래스터 그래픽에서 앤티 앨리어싱을 정확하게 방지하려면 픽셀 단위로 정보를 양자화해야하기 때문에 항상 컨테이너보다 더 많은 공간이 필요합니다. 캔버스에 고정 된 양의 정보 (200x200 픽셀)를 보유하려면이 방법을 사용할 수 없습니다.

당신은 아직 할 수있는 것은 모델로 그 캔버스를 사용하지만,하지 뷰)

내가 변수 공간을 통해 수정 크기의 캔버스의 안티 앨리어싱을하지 않은 경우, 나는 또 다른 캔버스를 만들 것 그 크기가 CSS에 의존하지 않고 js 이벤트 (window resize event listener 및 window.innerWidth, window.innerHeight)를 찾은 다음 ctx.imageSmoothingEnabled (= false)을 비활성화하는 동안 "모델"원래 캔버스를 그려 필요한 결과를 얻으십시오. 당신이 CSS와 캔버스를 확장하는 경우

var canvasModel = document.createElement('canvas'), // your current canvas 
    canvas = document.getElementById('view-canvas'), // displaying on the screen 
    ctxModel = canvasModel.getContext('2d'), 
    ctx = canvas.getContext('2d'); 

ctx.imageSmoothingEnabled = false; 

// all of your stuff that you're currently doing goes here 
... 

// every time you update the 200x200 canvas, you do this: 
ctx.drawImage(canvasModel, 0, 0, w, h);