我制作了一个小型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 });
任何人都可以提出建议或指示方向以使其正确缩放吗?
答案 0 :(得分:0)
目前,获取屏幕尺寸的正确方法是
window.innerWidth
&#13;
和
window.innerHeight
&#13;
要使Canvas对象全屏显示,请设置
canvas.width= window.innerWidth; canvas.height= window.innerHeight
&#13;