Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   квадрат по середине canvas (https://javascript.ru/forum/misc/77624-kvadrat-po-seredine-canvas.html)

Всемогущий 29.05.2019 12:00
квадрат по середине 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>

В этом коде он должен по логике появляться по середине канваса :help: :help:

Dilettante_Pro 29.05.2019 12:36
Всемогущий,
попробуйте
ctx.fillRect(width/2,height/2,100,100);

Для лучшей симметрии из первых двух параметров можно вычесть 50

Всемогущий 29.05.2019 12:44
Цитата:
Сообщение от Dilettante_Pro (Сообщение 508465)
Всемогущий,
попробуйте
ctx.fillRect(width/2,height/2,100,100);

Для лучшей симметрии из первых двух параметров можно вычесть 50
Да так можно сделать, но если другой решение этой проблемы ?! Чтобы на разных разрешениях экрана(монитора) все равно квадрат был по середине !

Dilettante_Pro 29.05.2019 13:31
Всемогущий,
Это и есть решение проблемы. Вы перепутали координаты по горизонтали и вертикали.

<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>

рони 29.05.2019 13:42
Всемогущий,
<!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>

Alexandroppolus 29.05.2019 15:30
В ctx.fillRect координаты надобно округлять до целого, иначе квадрат может быть с размытыми краями

https://jsfiddle.net/0es19u68/ - в верхнем ряду при нечетных размерах дробные координаты, размытые края. В нижнем всё нормально.

Подробнее здесь: https://webref.ru/layout/diveintohtml5/canvas
"Почему мы начинаем x и y c 0.5, а не с 0?"

Всемогущий 29.05.2019 15:40
Спасибо всем за решение проблемы уже разобрался

Всемогущий 30.05.2019 17:14
Странно очень, я раньше думал что x - это height, y - width

Malleys 31.05.2019 12:30
Цитата:
Сообщение от 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>


Часовой пояс GMT +3, время: 14:55.