Показать сообщение отдельно
  #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.
Ответить с цитированием