0

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

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

但是缩放是 Android 中的一个问题。我也提到了 CocoonJS 演示列表。他们专门margin:0px为android设置。

<!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 回答