Question

在大画布上设置动画图像时，图像会在非整数坐标上正确渲染，动画也很流畅。在小画布上，比如200x200，子像素坐标不适用，图像＆＃34;跳跃＆＃34;从整数位置到下一个位置，创建一个＆＃34;紧张的＆＃34;运动。

该问题似乎仅适用于栅格源（图像和画布）。例如，文本在所有画布尺寸上平滑动画。

我目前正在使用Chrome版本58.0.3029.110（64位）进行测试，但问题也出现在早期版本中。

有没有人偶然发现这个问题？

这是我测试的代码：

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<script>
    var outer = [200, 200];
    var inner = [200, 200];

    function CreateCanvas(w, h, hidden) {
        var canvas = document.createElement('canvas');
        if(!hidden) document.body.appendChild(canvas);
        canvas.width = w;
        canvas.height = h;
        var context = canvas.getContext('2d');
        return {canvas:canvas, context:context};
    }

    function rgba2hex(color) {
        return "rgba(" + Math.floor(color[0] * 255) + ',' + Math.floor(color[1] * 255) + ',' + Math.floor(color[2] * 255) + ',' + color[3] + ")";
    }

    function GetSystemTimeMS() {
        return (new Date()).getTime();
    }

    function GetTimeDifferenceMS(time) {
        return GetSystemTimeMS() - time;
    }

    var outerFontSize = Math.min(100, outer[1] * 0.3);
    var innerFontSize = Math.min(100, inner[1] * 0.3);

    var outerBuffer = CreateCanvas(outer[0], outer[1], false);
    outerBuffer.context.font = outerFontSize + "px times";
    outerBuffer.context.fillStyle = rgba2hex([0,0,0,1]);    

    var innerBuffer = CreateCanvas(inner[0], inner[1], true);
    innerBuffer.context.font = innerFontSize + "px times";
    innerBuffer.context.fillStyle = rgba2hex([0,0,0,1]);
    innerBuffer.context.fillText("raster", 10, inner[1] * 0.9);

    var startTime = GetSystemTimeMS();
    function draw() {
        var span = 5;
        var phase = ((GetTimeDifferenceMS(startTime) / 1000) % span) / span;
        outerBuffer.context.clearRect(0, 0, outer[0], outer[1]);
        var x = 50 + phase * 20;

        outerBuffer.context.fillText("vector", x, outer[1] * 0.5);
        outerBuffer.context.drawImage(innerBuffer.canvas, x, 0);

        window.setTimeout(draw, 10);
    }
    draw();
</script>
</body>
</html>

Answer 1

我可以在我的稳定铬合金和金丝雀上重现它 I reported给铬团队。我们希望很快就能解决问题。

对于变通方法，你可以缩小你的图像（我找到的最小值是size * 0.99。这应该强制使用抗锯齿算法。

var outer = [200, 200];
var inner = [200, 200];

function CreateCanvas(w, h, hidden) {
  var canvas = document.createElement('canvas');
  if (!hidden) document.body.appendChild(canvas);
  canvas.width = w;
  canvas.height = h;
  var context = canvas.getContext('2d');
  return {
    canvas: canvas,
    context: context
  };
}

function rgba2hex(color) {
  return "rgba(" + Math.floor(color[0] * 255) + ',' + Math.floor(color[1] * 255) + ',' + Math.floor(color[2] * 255) + ',' + color[3] + ")";
}

function GetSystemTimeMS() {
  return (new Date()).getTime();
}

function GetTimeDifferenceMS(time) {
  return GetSystemTimeMS() - time;
}

var outerFontSize = Math.min(100, outer[1] * 0.3);
var innerFontSize = Math.min(100, inner[1] * 0.3);

var outerBuffer = CreateCanvas(outer[0], outer[1], false);
outerBuffer.context.font = outerFontSize + "px times";
outerBuffer.context.fillStyle = rgba2hex([0, 0, 0, 1]);

var innerBuffer = CreateCanvas(inner[0], inner[1], true);
innerBuffer.context.font = innerFontSize + "px times";
innerBuffer.context.fillStyle = rgba2hex([0, 0, 0, 1]);
innerBuffer.context.fillText("raster", 10, inner[1] * 0.9);

var startTime = GetSystemTimeMS();

function draw() {
  var span = 5;
  var phase = ((GetTimeDifferenceMS(startTime) / 1000) % span) / span;
  outerBuffer.context.clearRect(0, 0, outer[0], outer[1]);
  var x = 50 + phase * 20;

  outerBuffer.context.fillText("vector", x, outer[1] * 0.5);
  // shrink a little bit our image
  outerBuffer.context.drawImage(innerBuffer.canvas, x, 0, 200 * 0.99, 200 * 0.99);

  requestAnimationFrame(draw);
}
draw();

在chrome

1 个答案: