Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 09.10.2012, 20:46
Новичок на форуме
Отправить личное сообщение для tw1nk Посмотреть профиль Найти все сообщения от tw1nk
 
Регистрация: 09.10.2012
Сообщений: 4

canvas & images
Приветствую!
столкнулся с проблемой при рисовании картинок в canvas
раньше у меня было 1 изображение танка и оно должно было двигаться. Картинка рисовалось через requestAnimationFrame, и все было окей.
но сейчас мне понадобилось что бы в разных направлениях картинка танка поворачивалась соответственно направлению движения.
Была сделана 1 большая картинка, содержащая 4 нужных мне(по направлениям движения) и отрисовывались ее фрагменты, но тут обнаружилась проблема:
теперь при передвижении изображение танка периодически немного дергается. Вот код
function draw() {
    canvas.clearRect(0, 0, 600, 600);
    for (var g in tanks) {
        if (tanks[g] != null) {
            switch (tanks[g].direction) {

                case 1:
                    canvas.drawImage(image, 120, 0, 40, 40, tanks[g].cor[0], tanks[g].cor[1], 40, 40);
                    break;
                case 2:
                    canvas.drawImage(image, 0, 0, 40, 40, tanks[g].cor[0], tanks[g].cor[1], 40, 40);
                    break;
                case 3:
                    canvas.drawImage(image, 40, 0, 40, 40, tanks[g].cor[0], tanks[g].cor[1], 40, 40);
                    break;
                case 4:
                    canvas.drawImage(image, 80, 0, 40, 40, tanks[g].cor[0], tanks[g].cor[1], 40, 40);
                    break;
            }
        }
    }
    if (nextFrame != null) {
        nextFrame()
    }
}

Как это пофиксить?
Спасибо
Ответить с цитированием
  #2 (permalink)  
Старый 10.10.2012, 22:06
Новичок на форуме
Отправить личное сообщение для tw1nk Посмотреть профиль Найти все сообщения от tw1nk
 
Регистрация: 09.10.2012
Сообщений: 4

может все-таки кто-нибудь знает?
Ответить с цитированием
  #3 (permalink)  
Старый 10.10.2012, 22:16
sinistral
Посмотреть профиль Найти все сообщения от melky
 
Регистрация: 28.03.2011
Сообщений: 5,418

сделайте демонстрацию ... как можно лечить зубы по фотографии
Ответить с цитированием
  #4 (permalink)  
Старый 10.10.2012, 22:53
Новичок на форуме
Отправить личное сообщение для tw1nk Посмотреть профиль Найти все сообщения от tw1nk
 
Регистрация: 09.10.2012
Сообщений: 4

Сообщение от melky Посмотреть сообщение
сделайте демонстрацию ... как можно лечить зубы по фотографии
извините)
но всмысле демонстрацию?)
вот на всякий случай полный код:
var ws;
var tanks;
var canvas;
var nextFrame;
var interval;
var id;
var image;
$(function () {
    inittest();
});


function inittest() {

    window.addEventListener("keydown", function (e) {
        var key = e.keyCode;
        if (key == 32) {
            ws.send("fire")
        }
        if (key > 36 && key < 41) {
            switch (key) {
                case 37:
                    setDirection("left");
                    break;
                case 38:
                    setDirection("up");
                    break;
                case 39:
                    setDirection("right");
                    break;
                case 40:
                    setDirection("down");
                    break;
            }
        }
    }, false);

    ws = new WebSocket("ws://localhost:8080/drawServlet");
    ws.onopen = function (data) {
    };
    ws.onmessage = function (data) {
        onmessage(data);
    };
    canvas = document.getElementById("mcanvas").getContext("2d");//почему не работает $("#mcanvas")???
    tanks = [];
    rockets = [];
    image = new Image();
    image.src = "/images/sprite1.png";
    initFrame();
}
function onmessage(data) {
    var packet = JSON.parse(data.data);
    if (packet.type == "join") {
        tanks[packet.id] = new Tank(packet.id, packet.x, packet.y);
        id = packet.id;
    }
    else if (packet.type == "update") {
        updatetest(packet);
    }
    else if (packet.type == "leave") {
        tanks[packet.id] = null;
        delete tanks[packet.id];
    }
}
function draw() {
    canvas.clearRect(0, 0, 600, 600);
    for (var g in tanks) {
        if (tanks[g] != null) {
            switch (tanks[g].direction) {

                case 1:
                    canvas.drawImage(image, 120, 0, 40, 40, tanks[g].cor[0], tanks[g].cor[1], 40, 40);
                    break;
                case 2:
                    canvas.drawImage(image, 0, 0, 40, 40, tanks[g].cor[0], tanks[g].cor[1], 40, 40);
                    break;
                case 3:
                    canvas.drawImage(image, 40, 0, 40, 40, tanks[g].cor[0], tanks[g].cor[1], 40, 40);
                    break;
                case 4:
                    canvas.drawImage(image, 80, 0, 40, 40, tanks[g].cor[0], tanks[g].cor[1], 40, 40);
                    break;
            }
        }
    }
    if (nextFrame != null) {
        nextFrame()
    }
}
function updatetest(lol) {
    for (var i in lol.data) {
        if (tanks[lol.data[i].id] != undefined) {
            tanks[lol.data[i].id].cor[0] = lol.data[i].x;
            tanks[lol.data[i].id].cor[1] = lol.data[i].y;
            tanks[lol.data[i].id].direction = lol.data[i].direction;
        }
        else {
            tanks[lol.data[i].id] = new Tank(lol.data[i].id, lol.data[i].x, lol.data[i].y)
        }
    }
}


function initFrame() {
    if (window.webkitRequestAnimationFrame) {
        nextFrame = function () {
            webkitRequestAnimationFrame(draw);
        };
    } else if (window.mozRequestAnimationFrame) {
        nextFrame = function () {
            mozRequestAnimationFrame(draw);
        };
    } else {
        interval = setInterval(draw(), 1000 / 30);
    }
    if (nextFrame != null) {
        nextFrame();
    }
}
function setDirection(dir) {

    ws.send(dir);
}

function Tank(id, x, y) {
    this.cor = [x, y];
    this.id = id;
    this.direction = 2;
}


вот изображение:

Ответить с цитированием
  #5 (permalink)  
Старый 10.10.2012, 23:15
sinistral
Посмотреть профиль Найти все сообщения от melky
 
Регистрация: 28.03.2011
Сообщений: 5,418

запускаемый пример на http://jsbin.com - я про это говорил.
Ответить с цитированием
  #6 (permalink)  
Старый 10.10.2012, 23:39
Новичок на форуме
Отправить личное сообщение для tw1nk Посмотреть профиль Найти все сообщения от tw1nk
 
Регистрация: 09.10.2012
Сообщений: 4

поскольку у меня идут websockets я немного модифицировал код и убрал от туда websocket`ы
пример тут http://jsbin.com/welcome/32689/edit

и вы знаете, никакого дерганья не наблюдается( непонятно в чем причина тогда их в исходном коде
Ответить с цитированием
  #7 (permalink)  
Старый 10.10.2012, 23:42
sinistral
Посмотреть профиль Найти все сообщения от melky
 
Регистрация: 28.03.2011
Сообщений: 5,418

Сообщение от tw1nk
и вы знаете, никакого дерганья не наблюдается( непонятно в чем причина тогда их в исходном коде
тогда сукроме debugger'а ничего посоветовать не могу.

хм ... интересно, могут ли сюда быть как-то замешаны вебсокеты?
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Почему неправильно вырисовывается canvas? Amateur Events/DOM/Window 0 19.09.2012 10:45
html5. Canvas Valdemor (X)HTML/CSS 2 25.08.2012 00:26
Запуск Canvas в IE9! Severtain Общие вопросы Javascript 7 11.04.2012 12:36
Создание экземпляра Canvas не затрагивая HTML Tails Общие вопросы Javascript 2 09.03.2012 12:55
Добавить на canvas еще один елемент greengarlic Общие вопросы Javascript 5 22.09.2010 10:16