29.05.2019, 12:00
|
|
Кандидат Javascript-наук
|
|
Регистрация: 11.09.2018
Сообщений: 128
|
|
|
квадрат по середине canvas
Здравствуйте, у меня возникла проблема почему-то квадрат не появляется по середине canvas, а появляется где-то сбоку. Почему он появляется сбоку а не по середине canvas ?!
Вот мой код:
<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>
<script type="text/javascript">
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext('2d');
canvas.left = 0;
canvas.top = 0;
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
canvas.style.overflow = "hidden";
var height;
var width;
function draw() {
height = window.innerHeight;
width = window.innerWidth;
ctx.fillRect(height/2,width/2,100,100);
}
function game() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
draw();
requestAnimationFrame(game);
}
requestAnimationFrame(game);
</script>
</body>
В этом коде он должен по логике появляться по середине канваса 
|
|
29.05.2019, 12:36
|
|
Профессор
|
|
Регистрация: 27.11.2015
Сообщений: 2,899
|
|
Всемогущий,
попробуйте
ctx.fillRect(width/2,height/2,100,100);
Для лучшей симметрии из первых двух параметров можно вычесть 50
|
|
29.05.2019, 12:44
|
|
Кандидат Javascript-наук
|
|
Регистрация: 11.09.2018
Сообщений: 128
|
|
Сообщение от Dilettante_Pro
|
Всемогущий,
попробуйте
ctx.fillRect(width/2,height/2,100,100);
Для лучшей симметрии из первых двух параметров можно вычесть 50
|
Да так можно сделать, но если другой решение этой проблемы ?! Чтобы на разных разрешениях экрана(монитора) все равно квадрат был по середине ! |
|
29.05.2019, 13:31
|
|
Профессор
|
|
Регистрация: 27.11.2015
Сообщений: 2,899
|
|
Всемогущий,
Это и есть решение проблемы. Вы перепутали координаты по горизонтали и вертикали.
<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>
<script type="text/javascript">
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext('2d');
canvas.left = 0;
canvas.top = 0;
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
canvas.style.overflow = "hidden";
var height;
var width;
function draw() {
height = window.innerHeight;
width = window.innerWidth;
ctx.fillRect(width/2-50,height/2-50,100,100);
}
function game() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
draw();
requestAnimationFrame(game);
}
requestAnimationFrame(game);
</script>
</body>
Последний раз редактировалось Dilettante_Pro, 29.05.2019 в 13:39.
|
|
29.05.2019, 13:42
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,127
|
|
Всемогущий,
<!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>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
function draw() {
ctx.fillRect((canvas.width - 100) / 2, (canvas.height - 100) / 2, 100, 100)
}
function game() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
draw();
requestAnimationFrame(game)
}
requestAnimationFrame(game);
</script>
</body>
|
|
29.05.2019, 15:30
|
 |
Профессор
|
|
Регистрация: 25.10.2016
Сообщений: 1,012
|
|
В ctx.fillRect координаты надобно округлять до целого, иначе квадрат может быть с размытыми краями
https://jsfiddle.net/0es19u68/ - в верхнем ряду при нечетных размерах дробные координаты, размытые края. В нижнем всё нормально.
Подробнее здесь: https://webref.ru/layout/diveintohtml5/canvas
"Почему мы начинаем x и y c 0.5, а не с 0?" |
|
29.05.2019, 15:40
|
|
Кандидат Javascript-наук
|
|
Регистрация: 11.09.2018
Сообщений: 128
|
|
|
Спасибо всем за решение проблемы уже разобрался
|
|
30.05.2019, 17:14
|
|
Кандидат Javascript-наук
|
|
Регистрация: 11.09.2018
Сообщений: 128
|
|
|
Странно очень, я раньше думал что x - это height, y - width
|
|
31.05.2019, 12:30
|
 |
Профессор
|
|
Регистрация: 20.12.2009
Сообщений: 1,714
|
|
|
Сообщение от 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>
Последний раз редактировалось Malleys, 31.05.2019 в 16:39.
|
|
|
|
