Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 16.05.2019, 15:59
Кандидат Javascript-наук
Отправить личное сообщение для Всемогущий Посмотреть профиль Найти все сообщения от Всемогущий
 
Регистрация: 11.09.2018
Сообщений: 123

Помогите с кликами
Здравствуйте, пожалуйста помогите реализовать код где будет по клику мыши появляться на canvas круг который движется в сторону клика
Я пытался реализовать этот код в функции, но круг то исчезал, то вообще не двигался и ошибки были !

Последний раз редактировалось Всемогущий, 16.05.2019 в 16:07.
Ответить с цитированием
  #2 (permalink)  
Старый 16.05.2019, 16:16
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,894

Всемогущий,
А можно макет с вашими попытками?
Ответить с цитированием
  #3 (permalink)  
Старый 16.05.2019, 16:40
Кандидат Javascript-наук
Отправить личное сообщение для Всемогущий Посмотреть профиль Найти все сообщения от Всемогущий
 
Регистрация: 11.09.2018
Сообщений: 123

Здравствуйте, макет к сожалению не могу показать. Но я все круги создавал в этом событии:
canvas.addEventListener.....

Когда я кликал круги не появлялись !
Ответить с цитированием
  #4 (permalink)  
Старый 16.05.2019, 16:56
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,894

Появляются
<style>
canvas {
    width:300px;
    height:150px;
    border:1px solid black;
}
</style>
<canvas id="canvas"></canvas>
<script>
  var canvas = document.getElementById('canvas');
     var ctx = canvas.getContext('2d');
    canvas.addEventListener("click", function() {
       ctx.beginPath();
       ctx.arc(75,75,50,0,Math.PI*2,true);
       ctx.stroke();
    });
</script>
Ответить с цитированием
  #5 (permalink)  
Старый 16.05.2019, 17:15
Кандидат Javascript-наук
Отправить личное сообщение для Всемогущий Посмотреть профиль Найти все сообщения от Всемогущий
 
Регистрация: 11.09.2018
Сообщений: 123

А как сделать чтобы появившиеся кружки двигались в направлении клика мыши ? что надое еще написать ?
Ответить с цитированием
  #6 (permalink)  
Старый 16.05.2019, 19:36
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 26,659

canvas cursor move ball
Всемогущий,
https://stackoverflow.com/questions/...o-mouse-coords
https://www.c-sharpcorner.com/Upload...sor-move-ball/
код из последней ссылки
<!DOCTYPE HTML>
<html>
<head>
    <title>Cursor Move Ball </title>
    <meta charset="utf-8">
    <style type="text/css">
       canvas { border: 1px solid black; }
    #game{background:Grey}
    </style>
    <script type="text/javascript">
      var a=0;
      var b=0;
      var mA=0;
      var mB=0;
      var delay=10;
      var timer=10;
function init(){
          var canvas = document.getElementById('game');

          //loop calls create each 20 ms
          setInterval(create,10);
          canvas.addEventListener('click', ev_cursor, false);

      }
      function ev_cursor (ev) {
            mA = ev.layerX;
            mB = ev.layerY;
      }
      function create(){
        var canvas = document.getElementById('game');
        if (canvas.getContext){
          var c = canvas.getContext('2d');
          timer+=1;
          c.fillStyle ="Blue";
          c.strokeStyle="#000";
          delay=20-(mB/100);
          accelX=mA-a;
          accelY=mB-b;
          a+=(accelX)/delay;
          b+=(accelY)/delay;
          a+=Math.sin(timer)*accelX/5;
          b+=Math.sin(timer)*accelY/5;
          c.clearRect(0,0,1000,900);
          c.beginPath();
          c.arc(a,b,100,0,Math.PI*2,true);     // 100 is ball size
          c.fill();
        }
      }
    </script>
</head>
<body onload="init();">
 <div><h1>HTML5 Cursor Move Ball </h1></div>
    <canvas id="game" width="1000" height="800" >
    </canvas>
</body>
</html>
Ответить с цитированием
  #7 (permalink)  
Старый 16.05.2019, 22:18
Кандидат Javascript-наук
Отправить личное сообщение для Всемогущий Посмотреть профиль Найти все сообщения от Всемогущий
 
Регистрация: 11.09.2018
Сообщений: 123

Спасибо всем за ответы!) + в карму
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Помогите доработать скрипт меню Фартовый Оффтопик 7 27.11.2014 13:07
2-ой select грузит [object Object] помогите! espltd AJAX и COMET 1 05.08.2014 23:01
Помогите новичку! Анатолий Саратовцев Events/DOM/Window 7 04.08.2012 16:46
Помогите соединить две функции bratkovsky Общие вопросы Javascript 0 30.07.2012 22:53
Помогите! Многоуровневые вкладки! sergeeeeee Элементы интерфейса 2 02.08.2010 22:50