キャンバスフルスクリーン100％はぼやけを引き起こす

Question

私はキャンバスでは新しいですが、ゲーム全体を画面にして、より重要なことに小さな画面に反応しています。 ズームインされているように私の形がぼやけています。 CSSとそれは伸ばしてきたためだ2つのJavaScript機能

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

。

キャンバスには基本的に2つのサイズがあります。 1つのサイズはキャンバスがある「イメージ」のピクセル数です。上のCSSで設定したもう1つは、ブラウザがキャンバスの「イメージ」をレンダリングするサイズです。 （キャンバスは、多くの点で、静的にファイルに格納されるのではなく、JavaScriptによって動的に描画される単なる画像です）。

本質的には、300x150の画像を撮影し、ブラウザに何千ピクセルにも伸ばしてもらうように指示しました。それはとても良く見えません。

あなたが本当にユーザーが正確に選別一致する100％動的なキャンバスをしたい場合、あなたは自分のウィンドウの幅と高さを取得する必要があります。

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

をそしてキャンバスのサイズを設定するには、それらの値を使用this questionのように。

図面の計算で高さと幅を使用して、画面の正しい部分に正しいサイズのオブジェクトを配置する必要があります。

オプションで、大画面ではキャンバスの幅と高さを許容範囲内の高さに設定し、小さい画面では小さくすることができます。搾取された画像は、伸張された画像よりもよく見えます。