Question

我制作了一个小型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 });

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

Answer 1

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

＆＃13;

window.innerWidth

＆＃13;

和

＆＃13;

window.innerHeight

＆＃13;

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

＆＃13;

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

＆＃13;

CocoonJS a survival guide

Cocoon JS Canvas Scaling

1 个答案: