Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 10.08.2014, 20:01
Профессор
Отправить личное сообщение для Dimaz Посмотреть профиль Найти все сообщения от Dimaz
 
Регистрация: 25.12.2009
Сообщений: 222

Как перемещать объекты в canvas?
Помогите разобраться с перемещением квадрата. Чтобы он не растягивался, а перемещался.
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var x = 10;
var y = 10;
function draw(){
ctx.fillStyle = "green";
ctx.fillRect(x,y,15,15);
x++;
window.requestAnimationFrame(draw);
}
draw();

http://jsfiddle.net/g0Lmfygu/
Ответить с цитированием
  #2 (permalink)  
Старый 10.08.2014, 20:25
Профессор
Отправить личное сообщение для Sweet Посмотреть профиль Найти все сообщения от Sweet
 
Регистрация: 16.03.2010
Сообщений: 1,618

.clearRect()
Ответить с цитированием
  #3 (permalink)  
Старый 10.08.2014, 21:15
Аватар для Safort
Профессор
Отправить личное сообщение для Safort Посмотреть профиль Найти все сообщения от Safort
 
Регистрация: 23.12.2013
Сообщений: 1,856

Dimaz,
нужно очищать канвас(или его часть) перед каждым перемещением объекта.

<canvas id="myCanvas" width="400" height="400"></canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var x = 10;
var y = 10;
function draw(){
    ctx.clearRect(0,0, 400, 400);
    ctx.fillStyle = "green";
    ctx.fillRect(x,y,15,15);
    x++;
    window.requestAnimationFrame(draw);
}
draw();
</script>



//однажды я задал подобный вопрос на этом форуме, а какой-то гнидос меня протроллил так и не ответив(
Ответить с цитированием
  #4 (permalink)  
Старый 10.08.2014, 21:20
Профессор
Отправить личное сообщение для Sweet Посмотреть профиль Найти все сообщения от Sweet
 
Регистрация: 16.03.2010
Сообщений: 1,618

Сообщение от Safort
однажды я задал подобный вопрос на этом форуме
А под каким ником?
Ответить с цитированием
  #5 (permalink)  
Старый 10.08.2014, 21:34
Аватар для Safort
Профессор
Отправить личное сообщение для Safort Посмотреть профиль Найти все сообщения от Safort
 
Регистрация: 23.12.2013
Сообщений: 1,856

Sweet, ответил в лс.
Ответить с цитированием
  #6 (permalink)  
Старый 11.08.2014, 18:10
Профессор
Отправить личное сообщение для Dimaz Посмотреть профиль Найти все сообщения от Dimaz
 
Регистрация: 25.12.2009
Сообщений: 222

Сообщение от Safort Посмотреть сообщение
Dimaz,
нужно очищать канвас(или его часть) перед каждым перемещением объекта.

<canvas id="myCanvas" width="400" height="400"></canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var x = 10;
var y = 10;
function draw(){
    ctx.clearRect(0,0, 400, 400);
    ctx.fillStyle = "green";
    ctx.fillRect(x,y,15,15);
    x++;
    window.requestAnimationFrame(draw);
}
draw();
</script>



//однажды я задал подобный вопрос на этом форуме, а какой-то гнидос меня протроллил так и не ответив(
Так ведь если весь канвас очищать, надо будет все объекты заново рисовать. Это ж какая нагрузка будет) Химичил, химичил, вот что нахимичил:
function draw(){
ctx.fillStyle = "green";
ctx.fillRect(x,y,15,15);
ctx.clearRect(x-1,y,1,15);//очищаем
x++;
window.requestAnimationFrame(draw);
}
Ответить с цитированием
  #7 (permalink)  
Старый 11.08.2014, 19:54
Аватар для ixth
Профессор
Отправить личное сообщение для ixth Посмотреть профиль Найти все сообщения от ixth
 
Регистрация: 19.01.2010
Сообщений: 354

Ты не поверишь, но обычно все так и делается. Иногда делается несколько слоев-канвасов, если очень уж не хочется что-то перерисовывать. Не надо преждевременной оптимизации, добейся первых тормозов, а потом ищи узкие места, а то запутаешься там, где до готового результата будет как до Китая.
Ответить с цитированием
  #8 (permalink)  
Старый 11.08.2014, 21:09
Аватар для Safort
Профессор
Отправить личное сообщение для Safort Посмотреть профиль Найти все сообщения от Safort
 
Регистрация: 23.12.2013
Сообщений: 1,856

Dimaz,
Цитата:
Так ведь если весь канвас очищать, надо будет все объекты заново рисовать. Это ж какая нагрузка будет) Химичил, химичил, вот что нахимичил
Ну я же специально написал "нужно очищать канвас(или его часть)".
А вот допустим у тебя такая ситуация: на твоём холсте over 9000 всяких объектов и они постоянно куда-то движутся. Что тогда сделаешь?

Ну и как сказал товарищ выше - сначала добейся тормозов и только потом оптимизируй.
Ответить с цитированием
  #9 (permalink)  
Старый 09.10.2015, 00:12
Новичок на форуме
Отправить личное сообщение для Mips Посмотреть профиль Найти все сообщения от Mips
 
Регистрация: 14.04.2012
Сообщений: 2

А вот здесь
http://threejs.org/examples/#canvas_geometry_hierarchy
или здесь
http://threejs.org/examples/#canvas_lines
тоже каждый раз полностью очищается канвас и каждый элемент рисуется заново?
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Решение проблемы кодировок для AJAX и PHP без iconv (cp1251 в AJAX) Serge Ageyev AJAX и COMET 10 24.04.2013 20:48
как сделдать меню из двух калонок как в bestchange.ru Андрей Лебедев Элементы интерфейса 2 21.01.2013 10:32
как "достать" все объекты документа macdack Общие вопросы Javascript 39 13.10.2012 23:47
Как можно перемещать модальное окно? izcian Общие вопросы Javascript 2 06.10.2012 19:20
Как смотреть данные добавлены к объекты через data()? TicTac jQuery 4 04.05.2011 08:48