09.10.2012, 20:46
|
Новичок на форуме
|
|
Регистрация: 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()
}
}
Как это пофиксить?
Спасибо
|
|
10.10.2012, 22:06
|
Новичок на форуме
|
|
Регистрация: 09.10.2012
Сообщений: 4
|
|
может все-таки кто-нибудь знает?
|
|
10.10.2012, 22:16
|
sinistral
|
|
Регистрация: 28.03.2011
Сообщений: 5,418
|
|
сделайте демонстрацию ... как можно лечить зубы по фотографии
|
|
10.10.2012, 22:53
|
Новичок на форуме
|
|
Регистрация: 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;
}
вот изображение:
|
|
10.10.2012, 23:15
|
sinistral
|
|
Регистрация: 28.03.2011
Сообщений: 5,418
|
|
запускаемый пример на http://jsbin.com - я про это говорил.
|
|
10.10.2012, 23:39
|
Новичок на форуме
|
|
Регистрация: 09.10.2012
Сообщений: 4
|
|
поскольку у меня идут websockets я немного модифицировал код и убрал от туда websocket`ы
пример тут http://jsbin.com/welcome/32689/edit
и вы знаете, никакого дерганья не наблюдается( непонятно в чем причина тогда их в исходном коде
|
|
10.10.2012, 23:42
|
sinistral
|
|
Регистрация: 28.03.2011
Сообщений: 5,418
|
|
Сообщение от tw1nk
|
и вы знаете, никакого дерганья не наблюдается( непонятно в чем причина тогда их в исходном коде
|
тогда сукроме debugger'а ничего посоветовать не могу.
хм ... интересно, могут ли сюда быть как-то замешаны вебсокеты?
|
|
|
|