Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 20.01.2017, 08:39
Аспирант
Отправить личное сообщение для provigator Посмотреть профиль Найти все сообщения от provigator
 
Регистрация: 20.01.2017
Сообщений: 32

как сделать движение картинки в canvas
задача: сделать движение загруженной картинки
создаем холст:
<canvas width='480' height='320' id='example'></canvas>
Ответить с цитированием
  #2 (permalink)  
Старый 20.01.2017, 08:53
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,118

Сообщение от provigator
сделать движение картинки в canvas
Пример движения по кругу...
http://ru.stackoverflow.com/question...гу-js-canvas
Ответить с цитированием
  #3 (permalink)  
Старый 20.01.2017, 08:58
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

provigator,
JS-Анимация
Рисование изображений
Ответить с цитированием
  #4 (permalink)  
Старый 20.01.2017, 09:22
Аспирант
Отправить личное сообщение для provigator Посмотреть профиль Найти все сообщения от provigator
 
Регистрация: 20.01.2017
Сообщений: 32

задача: сделать движение загруженной картинки
создаем холст:
<html>
    <canvas width='480' height='320' id='example'></canvas>

создаем объект Image и загружаем картинку:
<script>
	var 
		example = document.getElementById("example")
		ctx = example.getContext('2d')
	
		pic = new Image()
		pic.src = 'image.png' 

		x=100 // начальная координата картинки по горизонтали
// если картинка загружена, то включаем таймер, который будет вызывать функцию движения картинки:
    pic.onload = function() {
		setInterval(motion(), 1000/30)
    }
// функция движения картинки
    function motion() {
		ctx.drawImage(pic, x, 0) // выводим картинку по координатам (pic, x, 0)
		x++ // увеличиваем координату X
    }
</script>

в результате картинка загружается и таймер вызывает функцию, картинка выводится по координатам (pic, x, 0), но движение не происходит
как правильно сделать вывод картинки и изменение координаты X ?
Ответить с цитированием
  #5 (permalink)  
Старый 20.01.2017, 09:30
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от provigator
setInterval(motion(), 1000/30)
убрать красное
Ответить с цитированием
  #6 (permalink)  
Старый 20.01.2017, 10:11
Аспирант
Отправить личное сообщение для provigator Посмотреть профиль Найти все сообщения от provigator
 
Регистрация: 20.01.2017
Сообщений: 32

setInterval(motion, 1000/30)

да, все работает
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как вы относитесь к наркоманам? Maxmaxmaximus7 Оффтопик 7 05.02.2014 13:29
Canvas. Как сделать или вообще нельзя? Вращение рандомизированно изменяемого объекта. Zemsky Общие вопросы Javascript 30 19.12.2013 19:44
Как сделать такое fancy menu uonax Элементы интерфейса 2 22.05.2010 12:52
Как сделать электронный каталог продукции? natarius Серверные языки и технологии 6 24.05.2009 20:56
Как сделать смену картинки, типа "до" и "после", без перезагрузки страницы? btstudio Events/DOM/Window 2 23.02.2009 20:43