javascript - 如何解决 HTML-canvas 大小为奇数的问题？

Question

我正在使用 HTML-canvas-element。

var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.fillStyle = "#FF0000";
ctx.rect(0, 0, canvas.width / 3, canvas.height / 3);
ctx.fill();
ctx.closePath();

ctx.beginPath();
ctx.fillStyle = "#FF0000";
ctx.rect(canvas.width / 3, 0, canvas.width / 3, canvas.height / 3);
ctx.fill();
ctx.closePath();

<canvas id="c" width="541" height="541"></canvas>

问题:当我选择一个奇数(在本例中为素数 541)作为 Canvas 大小并在其上绘制一个矩形(大小:整个 Canvas 的 1/3)时。

但这就是结果:

放大:

如您所见:两个矩形之间有一条不需要的线。我该如何解决这个问题？

使用 Math.floor()、Math.round() 和 Math.ceil() 对值进行舍入(可能)不是一个选项，因为 3 个矩形的宽度之和必须等于 Canvas 的宽度。

Answer 1

看起来您正在使用 HiDPI(高 DPI，Retina)模式(操作系统级别缩放超过 100%)，而您的 Canvas 方法与 HiDPI 不兼容。

解决方案是增加 CANVAS 元素的 width 和 height HTML 属性(或元素的 DOM 属性)与 window.devicePixelRatio 成比例，同时将其相应的 CSS 属性设置为当前大小。然后您的 Canvas 将兼容 HiDPI 并且不会模糊。这就是我在 web demo 中使用的非模糊整数比例缩放:

var pixelRatio = window.devicePixelRatio;

canvas.width  = 541 * pixelRatio;
canvas.height = 541 * pixelRatio;

canvas.style.width  = '' + 541 + 'px';
canvas.style.height = '' + 541 + 'px';

另一种方法是使用 scale()上下文对象的方法而不是设置 CSS 大小。这就是来自 HTML5Rocks 的 Paul Lewis recommends :

var pixelRatio = window.devicePixelRatio;

canvas.width  = 541 * pixelRatio;
canvas.height = 541 * pixelRatio;

canvas.getContext('2d').scale(pixelRatio, pixelRatio);