Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 25.08.2015, 18:47
Аспирант
Отправить личное сообщение для levshkatov Посмотреть профиль Найти все сообщения от levshkatov
 
Регистрация: 03.09.2014
Сообщений: 61

Прокрутка фона на canvas.
Необходимо сделать цикличную прокрутку фона/изображения на канвасе.
Причем в разные стороны (двигается туда, где находится курсор мыши).
Как это проще реализовать? Знаю, что для цикличной прокрутки только по оси Х достаточно такого вот кода:
var draw = canvas.getContext('2d');
var bg = new Image();
function drawBg() {  
	
    draw.drawImage(bg, -vx, 0);
	draw.drawImage(bg, bg.width - vx, 0);
    if (Math.abs(vx) > bg.width) {
		vx = 0;
	} 
    vx += 0.5;
}

Анимирую с помощью вот этого: requestAnimationFrame.
К мышке я смогу прикрутить, у меня не получается именно движение картинки в разных направлениях. Не совсем понимаю, для чего нужен второй метод отрисовки изображения, хотя без него цикла не получается.
Ответить с цитированием
  #2 (permalink)  
Старый 25.08.2015, 19:07
Профессор
Отправить личное сообщение для tsigel Посмотреть профиль Найти все сообщения от tsigel
 
Регистрация: 12.12.2012
Сообщений: 1,398

Возможно как вариант забрать данные о картинке по пикселям с помощью getImageData, а затем при смешении рисовать соответсвующие куски картинки. Во всяком случае на сколько я понимаю с помощью drawImage нельзя нарисовать кусок картинки, а вылезать за холст не хочется.
Ответить с цитированием
  #3 (permalink)  
Старый 25.08.2015, 19:17
Аспирант
Отправить личное сообщение для levshkatov Посмотреть профиль Найти все сообщения от levshkatov
 
Регистрация: 03.09.2014
Сообщений: 61

tsigel, да ну и ладно, вылезем за холст, ничего страшного. Фон и предполагается что будет больше размеров канваса. Пользователь начинает движение где-то с середины изображения (довольно широкая рамка изображения по краям остается за пределами канваса) Таким образом оно и прокручивается в разные стороны. Просто рисовать куски с помощью getImageData мне кажется намного сложнее, а главное ресурсозатратнее.
Ответить с цитированием
  #4 (permalink)  
Старый 25.08.2015, 19:48
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

levshkatov,
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
</head>

<body>
 <canvas width="800" height="600" id="canvas"></canvas>
  <script>
    var canvas = document.getElementById('canvas');
    var c = canvas.getContext('2d');
    var img = new Image();
img.onload = function() {
  c.drawImage(img,0,0);

}
img.src = "http://nevsepic.com.ua/uploads/posts/2011-10/1317583107_www.nevsepic.com.ua_kazumasa-uchio-ucchiey-003.jpg";
function getMousePos(canvas, event) {
        var rect = canvas.getBoundingClientRect();
        return {
          x: event.clientX - rect.left,
          y: event.clientY - rect.top
        };
      }


canvas.addEventListener('mousemove', function(event) {
     var mousePos = getMousePos(canvas, event);
     var x = (img.width - canvas.width)  * (mousePos.x /canvas.width );
     var y = (img.height - canvas.height)  * (mousePos.y /canvas.height );
         c.clearRect(0, 0, canvas.width, canvas.height);
         c.drawImage(img,-x|0,-y|0);
        });


  </script>

</body>

</html>
Ответить с цитированием
  #5 (permalink)  
Старый 25.08.2015, 19:58
Аспирант
Отправить личное сообщение для levshkatov Посмотреть профиль Найти все сообщения от levshkatov
 
Регистрация: 03.09.2014
Сообщений: 61

рони, не совсем то, что нужно. Мне необходима анимация циклического прокручивания картинки. Например, пока мышка направлена вверх, картинка движется вверх, и не прекращает двигаться. (одна заканчивается, следом за ней такая же, бесшовная, картинка) Здесь же "обозрение картинки в увеличенном масштабе".
Ответить с цитированием
  #6 (permalink)  
Старый 25.08.2015, 22:57
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

levshkatov,
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
</head>

<body>
 <canvas width="800" height="600" id="canvas"></canvas>
 <script>
var canvas = document.getElementById("canvas");
var c = canvas.getContext("2d");
var img = new Image;
img.onload = function() {
    drawBg()
};
img.src = "http://www.vector-eps.com/wp-content/gallery/old-model-paper-background-textures/thumbs/thumbs_old-model-paper-texture3.jpg";
var dir = {
    vx: 0,
    vy: 0,
    step: 2,
    x: 0,
    y: 0
};

function drawBg() {
    requestAnimationFrame(drawBg);
    c.clearRect(0, 0, canvas.width, canvas.height);
    for (var k = -img.height; k < canvas.height + img.height; k += img.height-1)
    for (var i = -img.width; i < canvas.width + img.width; i += img.width-1) c.drawImage(img, i - dir.vx, k - dir.vy);
    if (Math.abs(dir.vx) > img.width) dir.vx = 0;
    dir.vx += dir.x * dir.step;
    if (Math.abs(dir.vy) > img.height) dir.vy = 0;
    dir.vy += dir.y * dir.step
}

function getMousePos(canvas, event) {
    var rect = canvas.getBoundingClientRect();
    return {
        x: event.clientX - rect.left,
        y: event.clientY - rect.top
    }
}
var x = 0,
    y = 0,
    timer;
canvas.addEventListener("mousemove", function(event) {
    window.clearTimeout(timer);
    timer = window.setTimeout(function() {
        var mousePos = getMousePos(canvas, event);
        var a = Math.atan2(mousePos.y - y, mousePos.x - x);
        dir.x = -Math.cos(a);
        x = mousePos.x;
        dir.y = -Math.sin(a);
        y = mousePos.y
    }, 50)
});
  </script>

</body>

</html>

Последний раз редактировалось рони, 25.08.2015 в 23:21.
Ответить с цитированием
  #7 (permalink)  
Старый 26.08.2015, 08:40
Аспирант
Отправить личное сообщение для levshkatov Посмотреть профиль Найти все сообщения от levshkatov
 
Регистрация: 03.09.2014
Сообщений: 61

Большое спасибо за помощь!
Ответить с цитированием
  #8 (permalink)  
Старый 26.08.2015, 08:49
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

levshkatov,
таймер можно убрать при желании строки 48,50, 51, 58
Ответить с цитированием
  #9 (permalink)  
Старый 07.08.2023, 10:51
Интересующийся
Отправить личное сообщение для Dabonirc Посмотреть профиль Найти все сообщения от Dabonirc
 
Регистрация: 27.08.2014
Сообщений: 12

хочу использовать твой код но мне он непонятен
сделай пожста версию попроще:

просто функцию(x, y) которая двигает зацикленный фон на x и y

без мышки и таймера

вот так я расшифровал код но не уверен что верно:
в коде нет блоков в if и for - поэтому мне трудно его прочитать

var направление = {
    горизонтально: 0,
    вертикально: 0,
    шаг: 1,
    x: 0,
    y: 0
};

function сдвинуть_фон() {

    контекст.clearRect(0, 0, canvas.width, canvas.height)
    
    for (var k = -img.height; k < canvas.height + img.height; k += img.height-1)
    {
        for (var i = -img.width; i < canvas.width + img.width; i += img.width-1) 
        {
            контекст.drawImage(img, i - направление.горизонтально, k - направление.вертикально)
            
            if (Math.abs(направление.горизонтально) > img.width) 
            { 
                направление.горизонтально = 0 
            }

            направление.горизонтально += направление.x * направление.шаг;

            if (Math.abs(направление.вертикально) > img.height)
            {
                направление.вертикально = 0
            }

            направление.вертикально += направление.y * направление.шаг
        }
    }
}

Последний раз редактировалось Dabonirc, 07.08.2023 в 11:55.
Ответить с цитированием
  #10 (permalink)  
Старый 07.08.2023, 14:06
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Dabonirc,
<!DOCTYPE HTML>
<html>

<head>
    <title>Untitled</title>
    <meta charset="utf-8">
</head>

<body>
    <canvas width="800" height="600" id="canvas"></canvas>
    <script>
        let canvas = document.getElementById("canvas");
        let c = canvas.getContext("2d");
        let img = new Image;
        img.onload = function() {
            drawBg()
        };
        img.src = "http://www.vector-eps.com/wp-content/gallery/old-model-paper-background-textures/thumbs/thumbs_old-model-paper-texture3.jpg";
        let dir = {
            vx: 0,
            vy: 0,
            step: 2.3, //>0
            x: .7,// 1 ... -1
            y: .5 // 1 ... -1
        };

        function drawBg() {
            requestAnimationFrame(drawBg);
            c.clearRect(0, 0, canvas.width, canvas.height);
            for (let k = -img.height; k < canvas.height + img.height; k += img.height - 1)
                for (let i = -img.width; i < canvas.width + img.width; i += img.width - 1) c.drawImage(img, i - dir.vx, k - dir.vy);
            if (Math.abs(dir.vx) > img.width) dir.vx = 0;
            dir.vx += dir.x * dir.step;
            if (Math.abs(dir.vy) > img.height) dir.vy = 0;
            dir.vy += dir.y * dir.step
        }
    </script>
</body>

</html>
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Повтор фото (getUserMedia(),HTML5 Canvas) aspex Элементы интерфейса 1 27.12.2014 16:46
canvas рисование окружности imedia Элементы интерфейса 2 30.05.2014 17:40
Прокрутка фона yyyyuriyyyy Общие вопросы Javascript 2 26.05.2014 16:46
Создание экземпляра Canvas не затрагивая HTML Tails Общие вопросы Javascript 2 09.03.2012 13:55
Добавить на canvas еще один елемент greengarlic Общие вопросы Javascript 5 22.09.2010 10:16