0

canvas固定サイズ640*480の小さな HTML 5アプリケーションを作成しました。コードは640*480 canvasを考慮して書かれています (たとえば、テキストをペイントするか、画像を描画するか - 固定座標が使用されています)。

iPad mini、つまりスケーリングとタッチ座標ですべてが正常に機能しています。

しかし、Android ではスケーリングが問題です。CocoonJS Demo List も参考にしました。彼らは特にmargin:0pxAndroid用に設定しています。

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <style type="text/css">body { margin: 0px; }</style> <!-- Android fix -->
</head>
<body>
<script src="main.js"></script>
</body>
</html>

render()関数でこのようなコードを使用しました

context.font = '20pt Calibri';
context.fillStyle = 'rgb(250,130,50)';
context.fillText("Score : "+score,canvas.width-150,30);

ここのスコアは期待どおりに正しく表示されません。

CocoonJs のドキュメントを参照すると、この表記法に従うように言われました。

var canvas = document.createElement('canvas');
canvas.width= 640;
canvas.height= 480;
document.body.appendChild(canvas);
ctx= canvas.getContext("2d", {antialias : true });

誰かが何かを提案したり、適切にスケーリングするように方向性を示したりできますか?

4

1 に答える 1

0

今のところ、画面サイズを取得する正しい方法は

window.innerWidth

と

window.innerHeight

Canvas オブジェクトを全画面表示にするには、次のように設定します。

canvas.width= window.innerWidth; canvas.height= window.innerHeight

CocoonJS サバイバルガイド

于 2015-03-21T14:55:35.773 に答える