Cocoon JS Canvas Scaling

时间:2014-04-23 10:48:30

标签: javascript android html5 canvas cocoonjs

我制作了一个小型HTML 5 canvas应用程序,其固定大小为 640 * 480 。编写代码是考虑 640 * 480 canvas(比如绘制文本或绘制图像 - 已使用固定坐标)。

ipad mini中的一切工作正常,即缩放和触摸坐标。

但扩展是Android中的一个问题。我也推荐了CocoonJS演示列表。他们专门为Android设置了 margin:0px

<!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 });

任何人都可以提出建议或指示方向以使其正确缩放吗?

1 个答案:

答案 0 :(得分:0)

目前,获取屏幕尺寸的正确方法是

&#13;
&#13;
window.innerWidth
&#13;
&#13;
&#13;

&#13;
&#13;
window.innerHeight
&#13;
&#13;
&#13;

要使Canvas对象全屏显示,请设置

&#13;
&#13;
canvas.width= window.innerWidth; canvas.height= window.innerHeight
&#13;
&#13;
&#13;

CocoonJS a survival guide