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

@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>

Новые блоги и статьи Все статьи Все блоги /
Подключение Box2D v3 к SDL3 для Android: физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .
Влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .

@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