|
Сообщение от Alexandroppolus
|
|
В ctx.fillRect координаты надобно округлять до целого, иначе квадрат может быть с размытыми краями
|
Это не размытые края, а точное положение. Если округлять до целого, то анимация, особенно медленная, получается странная.
Если округлять, то хотя бы с точностью до 0,1. Округление позиции отвечает именно за позицию, а не за размытие. Если вам не нужно размытие, то примените к холсту...
canvas {
image-rendering: pixelated;
}
Пример...
<!DOCTYPE HTML>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body style="border:0px;padding:0px;margin:0px;overflow:hidden;">
<canvas id='canvas' height='0' width='0' style="border:0px;padding:0px;margin:0px;overflow:hidden;"></canvas>
<label style="position:absolute;top:8px;left:8px;">
Округлять с точностью до
<select id="factor"><option>10<option>1<option selected>0.1<option>0.01</select></label>
<label style="position:absolute;top:32px;left:8px;">
image-rendering:
<select id="imageRendering"><option>pixelated<option>unset</select></label>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var f;
(factor.onchange = function() { f = factor.value; })();
(imageRendering.onchange = function() { canvas.style.imageRendering = imageRendering.value; })();
function draw() {
var t = performance.now();
var dx = 100 * Math.cos(0.0001 * t);
var dy = 100 * Math.sin(0.0001 * t);
ctx.fillRect(
Math.floor(((canvas.width - 100) / 2 + dx) / f) * f,
Math.floor(((canvas.height - 100) / 2 + dy) / f) * f,
100, 100
)
}
function game() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
draw();
requestAnimationFrame(game)
}
requestAnimationFrame(game);
</script>
</body>