放大的画布没有得到抗锯齿答案

【问题标题】：Upscaled canvas is not getting antialiased放大的画布没有得到抗锯齿
【发布时间】：2013-10-31 08:23:45
【问题描述】：

我正在创建一个 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>

它在屏幕中间画了一个红点。除了适用于 Android 的 Chrome 之外，这在任何地方都适用。呈现this。

有人知道怎么回事吗？

【问题讨论】：

标签： android html google-chrome canvas viewport

【解决方案1】：

您遇到的问题是由于 Chrome for Android 的更改已关闭抗锯齿功能。

此错误概述了问题： https://code.google.com/p/chromium/issues/detail?id=285066

它似乎回到了 Chrome Beta 中的原始状态。

【讨论】：