Javascript-форум - Работа с Canvas

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

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

- - Работа с Canvas (https://javascript.ru/forum/misc/20758-rabota-s-canvas.html)

Работа с Canvas

Вообщем! Уже задавал я подобный вопрос! но после нескольких безсонных ночей за этим Canvas'ом:blink: Я решился задать его еще раз! :thanks:
При работе с изображением, как вращать непосредственно саму картинку/изображение, а не полотно!

Например! Есть стационарный фон.. необходимо чтобы на нем вращалась любая другая картинка!

p.s. svg не подходит так как он тормознутый.. css3 мне не подходит, потому он не способен рендить игровую графику!
webgl ... хз вообще что и как это!

через трансформацию

Все равно вращает весь экран!
Код:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head></head>
<body>
<canvas id="ci" width="80" height="80"></canvas>
<script>
function CanvasCenter(){
var i = new Image();
i.onload = function(){
var dl = i.width;
var c = document.getElementById("ci").getContext("2d");

var beta = -0.02; //угол поворота, если минус то против часовой

setTimeout(function(){
c.clearRect(0,0,dl,dl);
c.transform(Math.cos(beta), Math.sin(beta), -Math.sin(beta), Math.cos(beta), 0, 0);
c.drawImage(i, 0, 0, dl, dl);
c.restore();
setTimeout(arguments.callee,10);
},0);
}
i.src = "book.png";
}
CanvasCenter();
</script>
</body></html>

Еще код! Для двух изображений
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head></head>
<body>
<canvas id="ci" width="80" height="80"></canvas>
<script>
function CanvasCenter(){
var i = new Image();
var i2 = new Image();
i.onload = function(){
var dl = i.width;
var c = document.getElementById("ci").getContext("2d");

var beta = -0.02; //угол поворота, если минус то против часовой

setTimeout(function(){
c.clearRect(0,0,dl,dl);
c.drawImage(i2, 0, 0, dl, dl);
c.restore();
c.transform(Math.cos(beta), Math.sin(beta), -Math.sin(beta), Math.cos(beta), 0, 0);
c.drawImage(i, 0, 0, dl, dl);
c.restore();
setTimeout(arguments.callee,10);
},0);
}
i.src = "book.png";
i2.src = "test_screen.png";
}
CanvasCenter();
</script>
</body></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" xml:lang="fr" lang="fr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>rotate()</title>
	
	<style type="text/css" media="screen">
	img, canvas { border: 1px solid black; }
	</style>


<script type="text/javascript">

function rotate(p_deg) {
	if(document.getElementById('canvas')) {
		/*
		Ok!: Firefox 2, Safari 3, Opera 9.5b2
		No: Opera 9.27
		*/
		var image = document.getElementById('image');
		var canvas = document.getElementById('canvas');
		var canvasContext = canvas.getContext('2d');
		
		switch(p_deg) {
			default :
			case 0 :
				canvas.setAttribute('width', image.width);
				canvas.setAttribute('height', image.height);
				canvasContext.rotate(p_deg * Math.PI / 180);
				canvasContext.drawImage(image, 0, 0);
				break;
			case 90 :
				canvas.setAttribute('width', image.height);
				canvas.setAttribute('height', image.width);
				canvasContext.rotate(p_deg * Math.PI / 180);
				canvasContext.drawImage(image, 0, -image.height);
				break;
			case 180 :
				canvas.setAttribute('width', image.width);
				canvas.setAttribute('height', image.height);
				canvasContext.rotate(p_deg * Math.PI / 180);
				canvasContext.drawImage(image, -image.width, -image.height);
				break;
			case 270 :
			case -90 :
				canvas.setAttribute('width', image.height);
				canvas.setAttribute('height', image.width);
				canvasContext.rotate(p_deg * Math.PI / 180);
				canvasContext.drawImage(image, -image.width, 0);
				break;
		};
		
	} else {
		/*
		Ok!: MSIE 6 et 7
		*/
		var image = document.getElementById('image');
		switch(p_deg) {
			default :
			case 0 :
				image.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=0)';
				break;
			case 90 :
				image.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=1)';
				break;
			case 180 :
				image.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=2)';
				break;
			case 270 :
			case -90 :
				image.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=3)';
				break;
		};
		
	};
};


window.onload = function() {
	var image = document.getElementById('image');
	var canvas = document.getElementById('canvas');
	if(canvas.getContext) {
		image.style.visibility = 'hidden';
		image.style.position = 'absolute';
	} else {
		canvas.parentNode.removeChild(canvas);
	};
	
	rotate(0);
};

</script>

</head>

<body>


<p>
	rotate:
	<input type="button" value="0°" onclick="rotate(0);" />
	<input type="button" value="90°" onclick="rotate(90);" />
	<input type="button" value="180°" onclick="rotate(180);" />
	<input type="button" value="-90°" onclick="rotate(-90);" />
</p>


<p>
	<img id="image" src="http://www.google.com/intl/en_ALL/images/logo.gif" alt="" />
	<canvas id="canvas"></canvas>
</p>


</body>
</html>

melky читал! и ничего не нашел полезно для себя?!
Единственное упоминаеться об LibCanvas, но его я не нашел ((

А вот на счет кода ниже щя заценю!

Во втором примере вращаеться опять полотно на сколько я понимаю! Если поставить еще одну картинку на это же полотно они будут вращаться вместе (

Цитата:

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

Если поставить еще одну картинку на это же полотно они будут вращаться вместе

стоит изучить канву а не изобретать велосипед каой протеворечит базовым принципам
канву в контейнер и вращать контейнер css3 в ие фильтры

Для вращения картинки через css3 необходимо создавать отдельные дивы! а если картинок и интерактивных объектов около 1000 для каждого делать?!

Да и тогда по вашему методу проще создать n-ое количество холстов.. и спокойно вращать каждый элемент в отдельности.. но опять же! а если их будет около 1000!! ..

полотно рисуется. затем вращение на необход угол .отрисовка картинки. вращение полотна назад -то есть вращение полотна на тотже угол что и было повёрнуто но со знаком минус.

Я и пытаюсь это сделать! но ничего не получаеться!

Вот код набросал (только что):

<!DOCTYPE>
<html>
<head></head>
<body>
<canvas id="ci" width="720" height="404"></canvas>
<script>
function CanvasCenter(){
var i = new Image();
var i2 = new Image();
i.onload = function(){
var dl = i.width;
var c = document.getElementById("ci");
var context = c.getContext("2d");
var context2 = c.getContext("2d");
var beta = -0.02; //угол поворота, если минус то против часовой

setTimeout(function(){
context.save();
context.clearRect(0,0,dl,dl);
context.drawImage(i2, 0, 0);
context.restore();
context2.transform(Math.cos(beta), Math.sin(beta), -Math.sin(beta), Math.cos(beta), 0, 0);
context2.drawImage(i, 0, 0, dl, dl);
setTimeout(arguments.callee,10);
},0);
}
i.src = "book.png";
i2.src = "test_screen.png";
}
CanvasCenter();
</script>
</body></html>

Если начинаю возвращать полотно обратно картинка становиться стационарной!

Вот еще код!
Тут вообще ниче не крутиться!

<!DOCTYPE>
<html>
<head></head>
<body>
<canvas id="ci" width="720" height="404"></canvas>
<script>
function CanvasCenter(){
var i = new Image();
var i2 = new Image();
i.onload = function(){
var dl = i.width;
var c = document.getElementById("ci");
var context = c.getContext("2d");
var context2 = c.getContext("2d");

var beta = -0.02; //угол поворота, если минус то против часовой

setTimeout(function(){
context.restore();
context.save();
context2.save();
context.clearRect(0,0,dl,dl);
context.drawImage(i2, 0, 0);
context2.restore();

context2.transform(Math.cos(beta), Math.sin(beta), -Math.sin(beta), Math.cos(beta), 0, 0);
context2.drawImage(i, 0, 0, dl, dl);
setTimeout(arguments.callee,10);
},0);
}
i.src = "book.png";
i2.src = "test_screen.png";
}
CanvasCenter();
</script>
</body></html>

и не будет. угол поворота в канве относительный а не абсолютный.
для анимации вращения чегото на фоне чегото угол нужно менять . тоесть поворот на 1 градус-возврат на 1 градус,поворот на 2 градуса-возврат на два градуса,поворот на 3 -возврат на 3. и так пока не дойдёшь до необходимого угла
и у канвы нужно для нормальной работы явно задавать и размеры и разрешение

Вот например! И опять ничего! Все задано

..
setTimeout(function(){
{
сontext.rotate(-0.01);
сontext.drawImage (i, 0, 0,720,404);
сontext.rotate(0.01);
сontext.drawImage(i2, 0, 0, 125, 152);
}
..

т.е. она опять стационарна!
Повернулась.. отрисовала! Вернула все обратно! .. что-то типо этого!

var angl=0.01;
setTimeout(function(){
{
сontext.drawImage (i, 0, 0,720,404);|// рисуем фон
сontext.rotate(-angl);
сontext.drawImage(i2, 0, 0, 125, 152);// рисуем чегото на фоне
сontext.rotate(angl);
angl=angl+0.01;
}

както так

Опять не движеться! .. не знаю почему ((

Хотя сейчас еще раз попробую

у тебя таймер один раз по ходу выпоняется

Нет не в этом причина! Сначало жаловалась на
сontex.rotate(-angl);

щя еще попробую

я тебе грубо написал-посмотри критерии аргумента при вращении

ок! Да мне главное запустить сейчас.. вот теперь на drawImage жалуеться.. или у меня компилятор тупой!

Блин вообще не могу понять! ко всему придераеться.. вот код! вроде рабочий а запускаться не хочет!

<!DOCTYPE>
<html>
<head></head>
<body>
<canvas id="ci" width="720" height="404"></canvas>
<script>
function CanvasCenter(){
var i = new Image();
i.onload = function(){
var dl = i.width;
var c = document.getElementById("ci");
var context = c.getContext("2d");
var angl=0.01;
var angt;

setTimeout(function(){
context.drawImage(i, 0, 0, 125, 152);// рисуем фон
сontext.rotate(angt);
context.drawImage(i2, 0, 0, 720, 404);// рисуем чегото на фоне
сontext.rotate(angl);
angl=angl+0.01;
angt= (-angl);
setTimeout(arguments.callee,10);
},0);
}
i.src = "book.png";
i2.src = "test_screen.png";
}
CanvasCenter();
</script>
</body></html>

Все запустил! Спасибо))