Форум

cyber · #1 (**permalink**) 30.10.2012, 00:01

Возник вопрос, как лучше перемещать обьекты(фигуры, картинки) по 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 · #2 (**permalink**) 30.10.2012, 18:49

эм.. , никто не работал с canvas ?O_o

dmitriymar · #3 (**permalink**) 30.10.2012, 19:02

cyber,
просто ты поиском по сайту пользоваться не умеешь

cyber · #4 (**permalink**) 30.10.2012, 19:15

dmitriymar,да вроде искал нечего такого и нет, или я провтыкал?

DjDiablo · #5 (**permalink**) 30.10.2012, 19:20

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

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

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

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

dmitriymar · #6 (**permalink**) 30.10.2012, 19:35

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

или я провтыкал?

или

cyber · #7 (**permalink**) 30.10.2012, 19:39

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

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

так и делаю так как считаю что это самый оптимальный вариант.
Я уже разобрался в общем, нашел на msdn все ответы
Но вопрос был немного в другом :
можно ли перемещать обьекты на канве как дом обьекты , тюе просто изменить координаты ? - ответ: нет.
П.с вопрос не много туповат но все же лучше уточнить(сор за глупую тему)=)

cyber · #8 (**permalink**) 30.10.2012, 19:59

Сообщение от Дзен-трансгуманист

Проведем мысленный эксперимент. Предположим, что на канве есть обьекты, которые можно перемещать как дом обьекты. И в чем разница? ТЫ стираешь кусок канвы и рисуешь в новом месте, либо браузер САМ стирает кусок канвы и рисует в новом месте. А разница в том, что браузер должен был бы сделать это в исходном порядке наложения слоев (а-ля z-index'ов), а значит, возможно, понапрасну перерисовать еще кучу объектов.

В этом и смысл работы канваса, что его графический контекст является дискретным объектом на уровне браузера. Движок не тратит время на каскадную перерисовку разных частей, как в случае с DOM.

хм... , понял спс.
черт было бы время сел бы читать книгу, а так приходиться задавать тупые вопросы.=(

melky · #9 (**permalink**) 30.10.2012, 20:14

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

эм.. , никто не работал с canvas ?O_o

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

https://developer.mozilla.org/en-US/...imizing_canvas

cyber · #10 (**permalink**) 30.10.2012, 20:35

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

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

https://developer.mozilla.org/en-US/...imizing_canvas

на msdn есть много интересного, но за ссылку спасибою

Форум

Справочник

Discord чат

Курсы javascript