2

私は現在、HTML5 を多用するモバイル Web アプリケーションに取り組んでいます<canvas>。キャンバスにたくさんの円や文字を描いています。

現在 HD / Retina ディスプレイで描画しているかどうかを検出するために、次のことを行っています。

// Retina Display ?             
if (window.devicePixelRatio == 2) {
  canvas.style.width = canvas.width + "px";
  canvas.style.height = canvas.height + "px";
  canvas.width = canvas.width * 2;
  canvas.height = canvas.height * 2;
  context.scale(2, 2);
}

Retina ディスプレイを使用している場合、これは 2 倍の大きさで描画され、縮小後には非常にシャープな円とテキストが得られます。

しかし、たとえば iPad2 では、テキストが少しピクセルっぽくぼやけて見えたり、角があまりシャープではなかったりします。しかし、ネイティブの iOS アプリと比較すると、アプリ、テキスト、コーナーが非常にきれいに見えるため、ディスプレイが実際にこれほどシャープに描画できることがわかります。物事をより鮮明に見せるためのキャンバス描画のトリックがあるのか​​ 、それともキャンバスが非HDディスプレイ上のネイティブiOSアプリケーションほど鮮明に見えないという論理的な説明があるのだろうか...

ありがとう！

4

3 に答える 3

1

座標を最も近い半ピクセルにオフセットしてみてください。つまり、これの代わりに: .lineTo(5, 5) を実行します: .lineTo(5.5, 5.5)。

于 2012-09-27T10:17:40.180 に答える
1

<canvas>ネイティブ テキスト レンダリング メソッドは、サブピクセル アンチエイリアシングなどの draw() メソッドよりもアンチエイリアシングに使用するコンテキスト情報が多いため、異なるレンダリング パスを使用する必要があります。(ピクセルを拡大すると、サブピクセルのアンチエイリアシングは非常に醜いアーティファクトを生成します)

残念ながら、この低レベルでのテキスト レンダリングを制御する解決策はありませ<canvas>ん。

さまざまなフォントを試してみてください。

または、 HUD スタイルで<canvas>CSS を使用してDOM テキストをオーバーレイすることもできます。position: absolute

複数のキャンバス (HTML 5) または div を使用して HUD データを表示する必要がありますか?

于 2012-09-27T09:44:21.537 に答える
0

以下のコードを試してみてください。

if (window.devicePixelRatio == 2) {
  canvas.width = window.innerWidth * 2;
  canvas.height = window.innerHeight * 2;
  context.scale(2, 2);
}
于 2015-01-10T16:35:41.403 に答える