캔버스 전체 화면 100 % 흐려짐을 유발합니다.

Question

저는 캔버스에서 새로운 게임을 만들기 위해 노력하고 있습니다. 더 작은 화면에 더 민감하게 반응합니다. 확대 된 것처럼 모양이 흐릿 해집니다. CSS를하고 밖으로 뻗어 되었기 때문입니다이 개 자바 스크립트 기능

canvas { 
    background: green; 
    width: 100%; 
    height: 100%; 
} 

//this function draws 
    function drawEverything() { 
     colorRect(0, 0, canvas.width, canvas.height, '#C9EEF3', "Main"); 
     colorRect(50,0,150, 35, "red","firstRow"); 

}

// this function gives the layout of the rectangels 
    function colorRect(leftX, topY, width, height, drawColor, tag) { 
     canvasContext.fillStyle = drawColor; 
     canvasContext.fillRect(leftX, topY, width, height); 
    } 

Answer 1

.

캔버스의 크기는 기본적으로 두 가지입니다. 하나의 크기는 캔버스가있는 '이미지'의 픽셀 수입니다. 위의 CSS를 사용하여 설정 한 다른 하나는 브라우저에서 캔버스 '이미지'를 렌더링하는 크기입니다. (캔버스는 여러면에서 파일에 정적으로 저장되는 대신 자바 스크립트에 의해 동적으로 그려지는 그림입니다.

그래서 본질적으로 300x150 크기의 사진을 찍은 다음 브라우저에서 수천 픽셀로 늘리라고 말했습니다. 그건별로 좋아 보이지 않을거야.

당신이 진정으로 사용자가 정확히 화면과 일치하는 100 % 동적 캔버스를 원하는 경우에, 당신은 그들의 윈도우의 폭과 높이를 취득해야합니다

var w = window.innerWidth; 
var h = window.innerHeight; 

을 그리고 캔버스 '크기를 설정하는 값을 사용 this question에서와 같이

그림의 정확한 부분에 올바른 크기로 개체를 배치하려면 도면 계산에서 높이와 너비를 사용해야합니다.

(선택 사항) 대형 화면의 경우 캔버스의 너비와 높이를 허용 할 수있는 수준으로 설정 한 다음 작은 화면의 경우 화면 높이를 낮추면됩니다. 정교한 이미지가 늘어난 이미지보다 좋아 보입니다.