我正在创建一个游戏,其中html5画布占据了整个屏幕。 但是当我使用
时<meta name="viewport" content="width=device-width">
标签,画布在最新的Android版Chrome上得到了极大的像素化。
我创建了一个简单的测试(可用here):
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta names="apple-mobile-web-app-status-bar-style" content="black-translucent" />
</head>
<body>
<canvas id="canvas"></canvas>
<script>
window.onload = function () {
var canvas = document.getElementById("canvas"),
ctx = canvas.getContext("2d"),
radius = 0;
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
radius = (canvas.width < canvas.height) ? canvas.width / 3 : canvas.height / 3;
ctx.beginPath();
ctx.arc(canvas.width / 2, canvas.height / 2, radius, 0, 2 * Math.PI, false);
ctx.fillStyle = "red";
ctx.fill();
}
</script>
</body>
</html>
它在屏幕中间绘制一个红点。除了Chrome for Android之外,这在任何地方都很有用。其中呈现this。
任何人都知道发生了什么事?
答案 0 :(得分:0)
您遇到的问题是由于Chrome for Android中的Antialiasing已关闭。
此错误概述了问题: https://code.google.com/p/chromium/issues/detail?id=285066
它似乎又回到了Chrome Beta中的原始状态。