Как решить проблемы с нечетными числами размером HTML-холста?

Question

Я работаю с элементом HTML-canvas.

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) в качестве размера холста и рисую на нем прямоугольник (размер: 1 /3 всего холста).

Но это результат:

увеличено:

Как видите: между двумя прямоугольниками есть нежелательная линия.Как я могу решить эту проблему?

Округление значений с Math.floor(), Math.round() и Math.ceil() (вероятно) не вариант, потому что сумма ширин 3 прямоугольников должна быть равнаШирина холста.

Answer 1

Похоже, вы используете режим HiDPI (High DPI, Retina) (с масштабированием на уровне ОС более 100%), в то время как ваш холст не совместим с HiDPI.

Решение состоит в том, чтобы увеличитьзначения атрибутов CANVAS элемента width и height HTML (или свойств DOM элемента) пропорционально window.devicePixelRatio при установке соответствующих свойств CSS на то, что вытекущий размерТогда ваш холст будет HiDPI-совместимым и без размытия.Это то, что я использовал в моей веб-демонстрации неблурного целочисленного масштабирования:

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 рекомендует :

var pixelRatio = window.devicePixelRatio;

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

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

Answer 2

Не уверен, что вам нравится это решение, но вы можете использовать Math.floor () только на x2

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();

// use here to make sure that the start position of the secound rect is right
var x2 = Math.floor(canvas.width / 3);

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

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

Answer 3

Работает нормально, если вы используете тег style или файл css

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 {
    width: 541px;
    height: 541px;
}

<canvas id="c" class="canvas"></canvas>