HTML5 canvas chrome 上没有子像素定位
No subpixel positioning on small HTML5 canvas on chrome
在大 canvas 上为图像设置动画时,图像在非整数坐标上正确呈现,并且动画流畅。
在小 canvas 上,比如 200x200,子像素坐标不适用,图像 "jumps" 从整数位置到下一个,创建 "jittery" 运动。
该问题似乎仅适用于光栅源(图像和 canvases)。例如,文本在所有 canvas 大小上都可以流畅地进行动画处理。
我目前正在使用 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>
我绝对可以在我的马厩 chrome 和我的金丝雀上重现它。
I reported Chromium 团队。希望尽快修复。
作为解决方法,您可以稍微缩小图像(我发现的最小值是 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();
在大 canvas 上为图像设置动画时,图像在非整数坐标上正确呈现,并且动画流畅。 在小 canvas 上,比如 200x200,子像素坐标不适用,图像 "jumps" 从整数位置到下一个,创建 "jittery" 运动。
该问题似乎仅适用于光栅源(图像和 canvases)。例如,文本在所有 canvas 大小上都可以流畅地进行动画处理。
我目前正在使用 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>
我绝对可以在我的马厩 chrome 和我的金丝雀上重现它。
I reported Chromium 团队。希望尽快修复。
作为解决方法,您可以稍微缩小图像(我发现的最小值是 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();