Постоянное выполнение действия

@ychelovek · Регистрация: 31.03.2013

Студворк — интернет-сервис помощи студентам

если я выполнение рисования на канве делаю через onmousemove все отлично работает

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
 $( "#games" ).mousemove(function( event ) {
        
    left=0;
    mx = event.clientX;
    
    my = event.clientY;
        
        if (f==false) {
        
 mxn = mx;
 myn = mx;
        }
        s=0;
        context.fillStyle = "#FFF"; // цвет "заливки"
 //     context.fillRect(mx, my, 5, 5); // закрашиваем холст        
      context.beginPath();
       context.fill(); // *1
    context.moveTo(mxn, myn);
    context.lineTo(mx, my);
     context.stroke();
     mxn = mx;
     myn = my;
     f=true;
      context.refresh();
});

НО, у меня рисует мышкой только если я ей вожу (оно и понятно, ведь событие mousemove). А у меня мой рисунок сам каждые 100 милесекунд сдвигается влево, то есть, если я мышкой не веду, у меня рисунок и не создается....

получается так

Я веду мышкой, потом перестаю вести, и снова веду. и получается большой пробел между линиями... как мне сделать что бы рисовало всегда?
Если вывожу в отдельную функцию, и вызываю через setInterval, то работать не хочет, потому что:

JavaScript
1
2
 mx = event.clientX;
my = event.clientY;

Не срабатывают...

Посоветуйте, что мне делать...

@Galphimbl · 25.03.2014, 19:34

ну вот легенький пример с интервалом

HTML5
1
2
<div>X: <span id="cX"></span></div>
<div>Y: <span id="cY"></span></div>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
var x_default = 100;
var y_default = 100;
var cX = document.getElementById('cX');
var cY = document.getElementById('cY');
var interval = setInterval(function(){
    cX.textContent = x_default;
    cY.textContent = y_default;
},100);
window.onmousemove = function(e){
    x_default = e.clientX;
    y_default = e.clientY;
}

вариант??
ссылка на пример

@ychelovek · 25.03.2014, 20:12 **[ТС]**

Galphimbl, но это ведь на движение мышки, а мне надо что бы без движения мышки выдавало координаты... в обещм, я просто сдвигаю канву, и мне надо что бы при движении холста рисовалось на нем

@Padimanskas · 25.03.2014, 21:00

HTML5
1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  <meta charset="utf-8">
  <title>canvas</title>
</head>
<body>
  <canvas id="canvas"></canvas>
</body>
</html>

CSS
1
2
3
4
5
#canvas {
  width: 100px;
  height: 100px;
  background-color: #C5C5C1;
}

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
$(document).ready(function(){
var canvas = $('#canvas')[0];
canvas.width = 100;
canvas.height = 100;
var context = canvas.getContext('2d');
 
var canDraw = false;
 
$('#canvas').mousedown(function(){
  canDraw = true;
});
 
$('#canvas').mouseup(function(){
  canDraw = false;
});
 
$('#canvas').mousemove(function(e){
  if(canDraw){
    context.fillRect(e.pageX,e.pageY,1,1);
  }
});
});

@ychelovek · 26.03.2014, 00:18 **[ТС]**

Не пойму, к чему здесь ваш пример...

@Padimanskas · 26.03.2014, 01:38

Сообщение от ychelovek

Не пойму, к чему здесь ваш пример...

Мне плохо понимать вас. Вы хотеть рисование на канва. Вот я и дать вам полноту пример рисование. Пользуйтесь пока моя доброта

@ychelovek · 26.03.2014, 15:02 **[ТС]**

Padimanskas, Извините пожалуйста. Я просто много тем создавал по разынм вопросам вот и запутался. Спасибо большое!!!

Добавлено через 2 минуты
Padimanskas, Но ведь в вашем примере перепрыгивает через пиксели... так не подходит((

@Padimanskas · 27.03.2014, 02:11

Самый хороший способ, это использовать массив где будут храниться ваши точки. Вызывать сохранение можно через определенное, пройденное кол-во пикселей. Рисовать нужно не пиксель, а линию т.е. использовать методы moveTo() и lineTo().

Все ингредиенты описанные ниже, помогут вам реализовать задачу. Добавьте немного мозгов и суп готов:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// так выглядит массив точек
var dots = [ {x: 1, y: 1}, {x: 20, y: 30}, {x: 100, y: 200} ];
 
// эта функция возвращает объект с координатами точки 
function getDot(x, y){
  return {x: x, y: y};
}
 
// чтобы поместить новую точку в массив точек, нужно  выполнить
dots.push( getDot( 50, 60 ) );
 
 
// так можно померить расстояние от точки до точки по теореме Пифагора
x = x2 - x1; // x2 - конечная точка, x1 - начальная точка
y = y2 - y1; // тоже самое
 
dist = Math.sqrt( x * x + y * y ); // теорема Пифагора

@ychelovek · 27.03.2014, 07:53 **[ТС]**

Padimanskas, Использовать массив тут плохо, потому что у меня постоянно изображение сдвигается влево, стирая часть.... Сделал пока так, но ищу более качественную реализацию...

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<style>
        html, body {
padding:0px;
  margin: 0px;
}
        canvas {
        padding:0px;
        margin:0px;
        position:absolute;
        left:0px;
        top:0px;
        }</style>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"  type="text/javascript"></script>
    </head>
    <body onresize="changes()">
        <div id="ga"><canvas onMousemove="canv()" id="games">Пора уже в этой жизни что-то менять</canvas></div>
   <script>
        sw = window.innerWidth;     
        sh = window.innerHeight; 
         var canvas = document.getElementById("games");
        canvas.width = sw; // задаём размеры холста
        canvas.height = sh;
    var context = canvas.getContext("2d");
        context.fillStyle = "#222"; // цвет "заливки"
        context.fillRect(0, 0, canvas.width, canvas.height); // закрашиваем холст        
 
        f=false;
      $( "#games" ).mousemove(function( event ) {
        
        left=0;
    mx = event.clientX;
    
    my = event.clientY;
        
        if (f==false) {
        
        mxn = mx;
 myn = mx;
        }
        s=0;
        context.fillStyle = "#FFF"; // цвет "заливки"
      context.beginPath();
       context.fill(); // *1
    context.moveTo(mxn, myn);
    context.lineTo(mx, my);
    context.moveTo(mxn+10, myn+10);
    context.lineTo(mx+10, my+10);
    context.moveTo(mxn-10, myn-10);
    context.lineTo(mx-10, my-10);
    
    context.moveTo(mxn+5, myn+5);
    context.lineTo(mx+5, my+5);
    context.lineWidth=5;
    context.moveTo(mxn-5, myn-5);
    context.lineTo(mx-5, my-5);
     context.stroke();
     mxn = mx;
     myn = my;
     f=true;
      context.refresh();
});
       
  
        function changed() {
        left= parseInt($( "#games" ).css('left'));
        width= parseInt($( "#games" ).css('width'));
 
    data = context.getImageData(0,0,sw,sh);
context.putImageData(data,-5,0);
 
        }
    
  setInterval(changed,10);
 
        </script>

Новые блоги и статьи Все статьи Все блоги /
Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»	SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .
SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .	SDL3 для Web (WebAssembly): Работа со звуком через SDL3_mixer 8Observer8 08.02.2026 Содержание блога Пошагово создадим проект для загрузки звукового файла и воспроизведения звука с помощью библиотеки SDL3_mixer. Звук будет воспроизводиться по клику мышки по холсту на Desktop и по. . .

@ychelovek 13 / 13 / 3 Регистрация: 31.03.2013 Сообщений: 287
	25.03.2014, 20:12 [ТС]
	Galphimbl, но это ведь на движение мышки, а мне надо что бы без движения мышки выдавало координаты... в обещм, я просто сдвигаю канву, и мне надо что бы при движении холста рисовалось на нем 0

@ychelovek 13 / 13 / 3 Регистрация: 31.03.2013 Сообщений: 287
	26.03.2014, 00:18 [ТС]
	Не пойму, к чему здесь ваш пример... 0

@ychelovek 13 / 13 / 3 Регистрация: 31.03.2013 Сообщений: 287
	26.03.2014, 15:02 [ТС]
	Padimanskas, Извините пожалуйста. Я просто много тем создавал по разынм вопросам вот и запутался. Спасибо большое!!! Добавлено через 2 минуты Padimanskas, Но ведь в вашем примере перепрыгивает через пиксели... так не подходит(( 0