Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 29.10.2012, 23:01
Аватар для cyber
I am Student
Отправить личное сообщение для cyber Посмотреть профиль Найти все сообщения от cyber
 
Регистрация: 16.12.2011
Сообщений: 4,415

перемещение обьектов на канве
Возник вопрос, как лучше перемещать обьекты(фигуры, картинки) по canvas
вот что пришло в голову(очистил , нарисовал ) , но почему то мне кажеться что это не очень производительно. что посоветуете ?
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Template</title>
<style>
    canvas {
     width:500px;
     height:500px;
     margin:50px;
     border:2px solid black;
    
    }
   
</style>

</head>

<body>

<canvas id="canv">Удалите нафиг свой Internet Explorer:)</canvas>
<a href="#" id="move">Move</a>
<script>
    var canva = document.getElementById("canv");
    canva.width = "500";
    canva.height = "500";
    var ctx = canva.getContext("2d");
    var img = new Image();
    img.src = "https://lh5.googleusercontent.com/-6tOrIXWWPU8/UI7g-2-XCaI/AAAAAAAAAFs/kWml_77qhyI/s165/img.gif";
    var loaded;

    img.onload = function () {
        
        ctx.drawImage(this, 100, 100,165,58);
        loaded = true;
    };

    //move
  

    var move = document.getElementById("move");
    move.onclick = function () {
        if (!loaded) {
            alert("не загружено");
            return;
        }
       
       
        Move();
        return false;
    };

    function Move() {
        var x = 100,y = 100;

        !function mv() {
           
            ctx.clearRect(x,y,165,58);
            x+=20;
            
            ctx.drawImage(img, x, y, 165, 58);


           if(x< 335) setTimeout(mv, 50);
        }();


    }
    
</script>


</body>
</html>
__________________
Цитата:
Если ограничения и условия описываются как "коробка", то хитрость в том что бы найти именно коробку... Не думайте о чем то глобальном - найдите коробку.

Последний раз редактировалось cyber, 29.10.2012 в 23:03.
Ответить с цитированием
  #2 (permalink)  
Старый 30.10.2012, 17:49
Аватар для cyber
I am Student
Отправить личное сообщение для cyber Посмотреть профиль Найти все сообщения от cyber
 
Регистрация: 16.12.2011
Сообщений: 4,415

эм.. , никто не работал с canvas ?O_o
__________________
Цитата:
Если ограничения и условия описываются как "коробка", то хитрость в том что бы найти именно коробку... Не думайте о чем то глобальном - найдите коробку.
Ответить с цитированием
  #3 (permalink)  
Старый 30.10.2012, 18:02
х.з
Посмотреть профиль Найти все сообщения от dmitriymar
 
Регистрация: 21.11.2010
Сообщений: 4,588

cyber,
просто ты поиском по сайту пользоваться не умеешь
Ответить с цитированием
  #4 (permalink)  
Старый 30.10.2012, 18:15
Аватар для cyber
I am Student
Отправить личное сообщение для cyber Посмотреть профиль Найти все сообщения от cyber
 
Регистрация: 16.12.2011
Сообщений: 4,415

dmitriymar,да вроде искал нечего такого и нет, или я провтыкал?
__________________
Цитата:
Если ограничения и условия описываются как "коробка", то хитрость в том что бы найти именно коробку... Не думайте о чем то глобальном - найдите коробку.
Ответить с цитированием
  #5 (permalink)  
Старый 30.10.2012, 18:20
Профессор
Отправить личное сообщение для DjDiablo Посмотреть профиль Найти все сообщения от DjDiablo
 
Регистрация: 04.02.2011
Сообщений: 1,815

1 подход)Два канваса один друг над другом
Фон на нижнем канвасе постоянен, рисуем на верхнем, очистка только верхнего clearRect.

2 подход) Перерисовываем кадр целиком

3 приём) если куча, если куча обьектов в одной области, то рендерем в буфер к примеру 300x300 пикселей, затем вставляем результат как картинку.

на форуме в том или ином виде уже обсуждалось, + статьи на хабре и в инете кое что
__________________
Лучше калымить в гандурасе чем гандурасить на колыме

Последний раз редактировалось DjDiablo, 30.10.2012 в 18:37.
Ответить с цитированием
  #6 (permalink)  
Старый 30.10.2012, 18:35
х.з
Посмотреть профиль Найти все сообщения от dmitriymar
 
Регистрация: 21.11.2010
Сообщений: 4,588

Сообщение от cyber
или я провтыкал?
или
Ответить с цитированием
  #7 (permalink)  
Старый 30.10.2012, 18:39
Аватар для cyber
I am Student
Отправить личное сообщение для cyber Посмотреть профиль Найти все сообщения от cyber
 
Регистрация: 16.12.2011
Сообщений: 4,415

Сообщение от DjDiablo Посмотреть сообщение
1 подход)Два канваса один друг над другом
Фон на нижнем канвасе постоянен, рисуем на верхнем, очистка только верхнего clearRect.
так и делаю так как считаю что это самый оптимальный вариант.
Я уже разобрался в общем, нашел на msdn все ответы
Но вопрос был немного в другом :
можно ли перемещать обьекты на канве как дом обьекты , тюе просто изменить координаты ? - ответ: нет.
П.с вопрос не много туповат но все же лучше уточнить(сор за глупую тему)=)
__________________
Цитата:
Если ограничения и условия описываются как "коробка", то хитрость в том что бы найти именно коробку... Не думайте о чем то глобальном - найдите коробку.
Ответить с цитированием
  #8 (permalink)  
Старый 30.10.2012, 18:59
Аватар для cyber
I am Student
Отправить личное сообщение для cyber Посмотреть профиль Найти все сообщения от cyber
 
Регистрация: 16.12.2011
Сообщений: 4,415

Сообщение от Дзен-трансгуманист Посмотреть сообщение
Проведем мысленный эксперимент. Предположим, что на канве есть обьекты, которые можно перемещать как дом обьекты. И в чем разница? ТЫ стираешь кусок канвы и рисуешь в новом месте, либо браузер САМ стирает кусок канвы и рисует в новом месте. А разница в том, что браузер должен был бы сделать это в исходном порядке наложения слоев (а-ля z-index'ов), а значит, возможно, понапрасну перерисовать еще кучу объектов.
В этом и смысл работы канваса, что его графический контекст является дискретным объектом на уровне браузера. Движок не тратит время на каскадную перерисовку разных частей, как в случае с DOM.
хм... , понял спс.
черт было бы время сел бы читать книгу, а так приходиться задавать тупые вопросы.=(
__________________
Цитата:
Если ограничения и условия описываются как "коробка", то хитрость в том что бы найти именно коробку... Не думайте о чем то глобальном - найдите коробку.
Ответить с цитированием
  #9 (permalink)  
Старый 30.10.2012, 19:14
sinistral
Посмотреть профиль Найти все сообщения от melky
 
Регистрация: 28.03.2011
Сообщений: 5,418

Сообщение от cyber
эм.. , никто не работал с canvas ?O_o
а вы не читали MDN, перед тем, как с ним работать?

https://developer.mozilla.org/en-US/...imizing_canvas
Ответить с цитированием
  #10 (permalink)  
Старый 30.10.2012, 19:35
Аватар для cyber
I am Student
Отправить личное сообщение для cyber Посмотреть профиль Найти все сообщения от cyber
 
Регистрация: 16.12.2011
Сообщений: 4,415

Сообщение от melky Посмотреть сообщение
а вы не читали MDN, перед тем, как с ним работать?

https://developer.mozilla.org/en-US/...imizing_canvas
на msdn есть много интересного, но за ссылку спасибою
__________________
Цитата:
Если ограничения и условия описываются как "коробка", то хитрость в том что бы найти именно коробку... Не думайте о чем то глобальном - найдите коробку.
Ответить с цитированием
Ответ


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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
перемещение элемента на место другого и замена одного на другой? SunYang Элементы интерфейса 1 03.07.2012 09:03
Перемещение, вращение, масштабирование div'a den_zm Dojo toolkit 1 13.10.2011 18:41
реакция на перемещение мыша по строкам в SELECT VovaLun Events/DOM/Window 0 16.12.2009 13:20
Перемещение окна приложения Don_001 Общие вопросы Javascript 2 07.07.2009 12:38