Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 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>

В этом коде он должен по логике появляться по середине канваса
Ответить с цитированием
  #2 (permalink)  
Старый 29.05.2019, 12:36
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

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

Для лучшей симметрии из первых двух параметров можно вычесть 50
Ответить с цитированием
  #3 (permalink)  
Старый 29.05.2019, 12:44
Кандидат Javascript-наук
Отправить личное сообщение для Всемогущий Посмотреть профиль Найти все сообщения от Всемогущий
 
Регистрация: 11.09.2018
Сообщений: 128

Сообщение от Dilettante_Pro Посмотреть сообщение
Всемогущий,
попробуйте
ctx.fillRect(width/2,height/2,100,100);

Для лучшей симметрии из первых двух параметров можно вычесть 50
Да так можно сделать, но если другой решение этой проблемы ?! Чтобы на разных разрешениях экрана(монитора) все равно квадрат был по середине !
Ответить с цитированием
  #4 (permalink)  
Старый 29.05.2019, 13:31
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 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.
Ответить с цитированием
  #5 (permalink)  
Старый 29.05.2019, 13:42
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Всемогущий,
<!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>
Ответить с цитированием
  #6 (permalink)  
Старый 29.05.2019, 15:30
Аватар для Alexandroppolus
Профессор
Отправить личное сообщение для Alexandroppolus Посмотреть профиль Найти все сообщения от Alexandroppolus
 
Регистрация: 25.10.2016
Сообщений: 1,004

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

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

Подробнее здесь: https://webref.ru/layout/diveintohtml5/canvas
"Почему мы начинаем x и y c 0.5, а не с 0?"
Ответить с цитированием
  #7 (permalink)  
Старый 29.05.2019, 15:40
Кандидат Javascript-наук
Отправить личное сообщение для Всемогущий Посмотреть профиль Найти все сообщения от Всемогущий
 
Регистрация: 11.09.2018
Сообщений: 128

Спасибо всем за решение проблемы уже разобрался
Ответить с цитированием
  #8 (permalink)  
Старый 30.05.2019, 17:14
Кандидат Javascript-наук
Отправить личное сообщение для Всемогущий Посмотреть профиль Найти все сообщения от Всемогущий
 
Регистрация: 11.09.2018
Сообщений: 128

Странно очень, я раньше думал что x - это height, y - width
Ответить с цитированием
  #9 (permalink)  
Старый 31.05.2019, 12:30
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 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.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Повтор фото (getUserMedia(),HTML5 Canvas) aspex Элементы интерфейса 1 27.12.2014 16:46
canvas рисование окружности imedia Элементы интерфейса 2 30.05.2014 17:40
Canvas картинка с обесцвечиванием. cheba Общие вопросы Javascript 9 31.05.2013 09:13
Создание экземпляра Canvas не затрагивая HTML Tails Общие вопросы Javascript 2 09.03.2012 13:55
Добавить на canvas еще один елемент greengarlic Общие вопросы Javascript 5 22.09.2010 10:16