Javascript-форум - Вопросы по Canvas

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Вопросы по Canvas (https://javascript.ru/forum/misc/30560-voprosy-po-canvas.html)

Цитата:

Сообщение от daima (Сообщение 195705)

- можно ссылки?

в той ссылке на игру что Вы дали куча канвасов(6 или 8)
посмотрите html код

Цитата:

Сообщение от vadim5june (Сообщение 195714)

в той ссылке на игру что Вы дали куча канвасов(6 или 8)
посмотрите html код

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="js/jquery.js" type="text/javascript">
<script src="js/crafty.js" type="text/javascript">
<script src="js/objects/flower.js" type="text/javascript">
<script src="js/objects/bush.js" type="text/javascript">
<script src="js/objects/grass.js" type="text/javascript">
<script src="js/objects/unit.js" type="text/javascript">
<script src="js/objects/player.js" type="text/javascript">
<script src="js/objects/fourway_ai.js" type="text/javascript">
<script src="js/objects/monster.js" type="text/javascript">
<script src="js/scenes/loading.js" type="text/javascript">
<script src="js/scenes/main.js" type="text/javascript">
<script src="js/scenes/win.js" type="text/javascript">
<script src="js/scenes/lose.js" type="text/javascript">
<script src="js/game.js" type="text/javascript">
<link charset="utf-8" media="screen" type="text/css" href="css/game.css" rel="stylesheet">
<title>Simpe RPG</title>
</head>
<body>
<i style="background:url(//www.tns-counter.ru/V13a****yandex_ru/ru/CP1251/tmsec=narod_total/0)"></i>
<script type="text/javascript" src="//mc.yandex.ru/metrika/watch.js">
<div style="display:none;">
<script type="text/javascript">
</div>
<noscript><div><img src="//mc.yandex.ru/watch/9281845%%ut%%" style="position:absolute; left:-9999px;" alt="" /></div></noscript>
<div id="cr-stage" style="width: 400px; height: 320px; overflow: hidden; position: relative; background: none repeat scroll 0% 0% rgb(0, 0, 0);">
<div style="position: absolute; z-index: 1;"></div>
<canvas width="400" height="320" style="position: absolute; left: 0px; top: 0px;"></canvas>
</div>
</body>
</html>

Всего 1

Цитата:

Сообщение от daima (Сообщение 195767)

Всего 1

Вы ссылку давали
http://www.pirateslovedaisies.com/
там их 8

<div id="piratesLoveDaisies">
    	
        <canvas id="fallingDaisies1" width="980" height="700" style="position: absolute; top: 0px; "></canvas>
           	  
		<div id="preloader">
            <canvas id="preloaderBar" width="240" height="36"></canvas>
			<img src="img/ui/preloaderGraphic.png" width="488" height="386" />
		</div>
        
        <canvas id="fallingDaisies2" width="980" height="700" style="position: absolute; top: 0px; "></canvas>

здесь 3 остальные найдете

хм. надо посмотреть. пока что вожусь с буфером.
var canvas = document.getElementById('scene');
c = canvas.getContext('2d');
дальше в с чего-то рисуем. Теперь пытаюсь закешировать некую область :

var cache_canvas = document.createElement('canvas').getContext('2d');
cache_canvas.drawImage(c,0,0,16,16,100,100,16,16);

и фаирбаг мне пишет NS_ERROR_XPC_BAD_CONVERT_JS: Could not convert JavaScript argument arg 0 [nsIDOMCanvasRenderingContext2D.drawImage] как же сделать копию области?

Цитата:

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

как же сделать копию области?

ctx.getImageData(x,y,w,h)
а обратно
ctx.putImageData(ImageData,x,y)

спасибо, помогло, правда пишут что putImageData слишком ресурсоемкий и по возм. его не использовать. Есть еще варианты?

и еще вопросы. есть объект Цветок:

var wind;
var pos=0;
var flower= {

init: function(x,y,sprite){

function animateFlower(){
	c.putImageData(cache_canvas,x,y);
	var imgFlower=new Image();
	imgFlower.src=sprite.spriteimg;
	c.drawImage(imgFlower,(sprite.flower[0]+pos)*16,sprite.flower[1]*16,16,16,x,y,16,16)
	pos<3 ? pos++ : pos=0;
x+=16;

}


var cache_canvas=c.getImageData(x,y,16,16)
animateFlower();
wind=setInterval(animateFlower,500)
},
clear: function(){
	clearInterval(wind);
}
}

где х, у - координаты места на холсте, sprite - ссылка на спрайт-объект
Инициализируем flower.init(100, 100,sprite);

во время анимации его координата х меняется.

1. Как мне ее получить чтобы потом обрабатывать столкновения? добавляю в объект flover:

posX: function(){
return x
}

но alert(flower.posX) печатает мне function(){return x}

2. допустим я захочу на игровое поле добавить еще цветок: flower.init(150, 150,sprite);

как мне теперь обратиться к нужному? например я захочу переместить 1й или 2й или скажем остановить анимацию какого-то из них

daima, а вы это без библиотек без всяких спрайт анимируете?

Цитата:

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

правда пишут что putImageData слишком ресурсоемкий и по возм. его не использовать

по оптимизации канваса есть хорошая статья
http://www.html5rocks.com/ru/tutoria...s/performance/

Цитата:

Сообщение от Hekumok (Сообщение 196150)

daima, а вы это без библиотек без всяких спрайт анимируете?

var cache_canvas=c.getImageData(x,y,16,16) - запомнили подложку. а дальше ф-я animateFlower() рисует определенные куски спрайта

Цитата:

1. Как мне ее получить чтобы потом обрабатывать столкновения? добавляю в объект flover:

posX: function(){
return x
}

но alert(flower.posX) печатает мне function(){return x}

Попробуйте так:

var p = flower.posX();
alert(p);

Цитата:

2. допустим я захочу на игровое поле добавить еще цветок: flower.init(150, 150,sprite);

как мне теперь обратиться к нужному? например я захочу переместить 1й или 2й или скажем остановить анимацию какого-то из них

Можно присвоить создаваемый объект переменной и таким образом обращаться к ней. Например, var rose = flower.init(150, 150,sprite). Если цветов будет много, можно создать для них массив и обращаться по порядковому номеру.