Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 03.07.2012, 22:19
Аватар для Hekumok
Отправить личное сообщение для Hekumok Посмотреть профиль Найти все сообщения от Hekumok
 
Регистрация: 04.06.2012
Сообщений: 513

формула для вычисления координаты в canvas
делаю мини-игру в canvasе, ну и там анимация задействована...в общем, нужно вычислить координаты точки, которая движется по параболе, а как это сделать не знаю(( по какой формуле это вычислить можно?

Последний раз редактировалось Hekumok, 03.07.2012 в 22:24.
Ответить с цитированием
  #2 (permalink)  
Старый 03.07.2012, 22:23
Аватар для Hekumok
Отправить личное сообщение для Hekumok Посмотреть профиль Найти все сообщения от Hekumok
 
Регистрация: 04.06.2012
Сообщений: 513

да, и можно как-нибудь реализовать onclick() в canvasе?!
Ответить с цитированием
  #3 (permalink)  
Старый 03.07.2012, 23:10
х.з
Посмотреть профиль Найти все сообщения от dmitriymar
 
Регистрация: 21.11.2010
Сообщений: 4,588

http://javascript.ru/tutorial/events/properties
Ответить с цитированием
  #4 (permalink)  
Старый 04.07.2012, 00:03
Аватар для Hekumok
Отправить личное сообщение для Hekumok Посмотреть профиль Найти все сообщения от Hekumok
 
Регистрация: 04.06.2012
Сообщений: 513

Сообщение от dmitriymar Посмотреть сообщение
http://javascript.ru/tutorial/events/properties
Ээмм...а это вы к чему?
Ответить с цитированием
  #5 (permalink)  
Старый 04.07.2012, 00:05
Аватар для vadim5june
Студент
Отправить личное сообщение для vadim5june Посмотреть профиль Найти все сообщения от vadim5june
 
Регистрация: 30.04.2012
Сообщений: 1,113

Сообщение от Hekumok Посмотреть сообщение
Это вы ко 2-ому вопросу?
canvas как и любой dom-элемент поддерживает события мыши в том числе click-но если надо кликать на определенный элемент внутри канвы то это сложнее
по первому вопросу-может быть заменить параболу на кривую второго порядка или кривую Безье или просто на дугу которые реализованы в канвасе
quadraticCurveTo(cp1x, cp1y, x, y) - кривая второго порядка;
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) - кривая Безье;

Последний раз редактировалось vadim5june, 04.07.2012 в 00:38.
Ответить с цитированием
  #6 (permalink)  
Старый 04.07.2012, 14:09
Аватар для Hekumok
Отправить личное сообщение для Hekumok Посмотреть профиль Найти все сообщения от Hekumok
 
Регистрация: 04.06.2012
Сообщений: 513

vadim5june,
1.можете, пожалуйста, дать ссылку на статью, где сказано как реализовать 'онклик' в canvasе, именно на определенную часть в нем?!
2.Я запускаю сетИнтервал, и мне нужно, чтобы вычислялась точка на этой параболе и затем рисовалась в canvasе, а не чтобы сразу рисовалась вся кривая
Ответить с цитированием
  #7 (permalink)  
Старый 04.07.2012, 15:59
Аватар для vadim5june
Студент
Отправить личное сообщение для vadim5june Посмотреть профиль Найти все сообщения от vadim5june
 
Регистрация: 30.04.2012
Сообщений: 1,113

Сообщение от Hekumok Посмотреть сообщение
vadim5june,
1.можете, пожалуйста, дать ссылку на статью, где сказано как реализовать 'онклик' в canvasе, именно на определенную часть в нем?!
вот на хабре есть одна ссылка- http://habrahabr.ru/post/119773/
хороших фрейемворков поддерживающих канвас не встречал-когда надо делал сам вычисляя координаты примерно так как в статье
Ответить с цитированием
  #8 (permalink)  
Старый 04.07.2012, 16:07
Люблю js, jquery
Отправить личное сообщение для dadli Посмотреть профиль Найти все сообщения от dadli
 
Регистрация: 23.08.2011
Сообщений: 214

Цитата:
как реализовать 'онклик' в canvasе
Hekumok,
с помошчю paperjs можно так
function onMouseDown(event){
		  if(some_obj.bounds.contains(event.point)){
		        alert("click");
		  }
}
Ответить с цитированием
  #9 (permalink)  
Старый 05.07.2012, 17:39
Аватар для Hekumok
Отправить личное сообщение для Hekumok Посмотреть профиль Найти все сообщения от Hekumok
 
Регистрация: 04.06.2012
Сообщений: 513

vadim5june, dadli, спасибо...фреймворки для меня сложноваты, paper.js легче, предпочту этот вариант =)
А что по первому вопросу?))
Ответить с цитированием
  #10 (permalink)  
Старый 05.07.2012, 18:38
Аватар для vadim5june
Студент
Отправить личное сообщение для vadim5june Посмотреть профиль Найти все сообщения от vadim5june
 
Регистрация: 30.04.2012
Сообщений: 1,113

Сообщение от Hekumok Посмотреть сообщение
А что по первому вопросу?))
<center>
<canvas id="b" height="0" width="0" 

style="border: 2px dashed 

red"></canvas><button onclick=ff()

>start</button>
</center>
<br><br>
<div id=d></div>
<script type="text/javascript">
var canvas = document.getElementById

("b");
canvas.width=250; 
canvas.height=180; 
var context = canvas.getContext("2d");
function clearCanvas()

{context.clearRect

(0,0,canvas.width,canvas.height)};

//----------
var x=-20;var y=40;
function ff(){setInterval(ff1,1000)}
function ff1(){x+=1;
y=x*x/2;
context. fillStyle='red';
context.arc

(x*5+120,y,5,0,2*Math.PI,true);
context.fill();
};
</script>

у меня вот так парабола получается-проверял только в хроме
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Получить координаты курсора в текстовом поле в пикселях prike Events/DOM/Window 4 23.05.2013 04:35
Модуль для работы с модулями JSprog Ваши сайты и скрипты 29 02.09.2009 13:31
Аналог wmode=transparent для Canvas или svg lusever Events/DOM/Window 1 15.06.2009 16:05
Скрипт для вычисления объема помещения Jameson Общие вопросы Javascript 27 19.03.2009 08:57