Форум

Severtain · #1 (**permalink**) 16.08.2011, 15:46

Вообщем! Уже задавал я подобный вопрос! но после нескольких безсонных ночей за этим Canvas'ом

Я решился задать его еще раз!

При работе с изображением, как вращать непосредственно саму картинку/изображение, а не полотно!

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

Severtain · #2 (**permalink**) 16.08.2011, 15:47

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

Octane · #3 (**permalink**) 16.08.2011, 18:37

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

Severtain · #4 (**permalink**) 16.08.2011, 18:41

Все равно вращает весь экран!
Код:
<!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>

Severtain · #5 (**permalink**) 16.08.2011, 18:43

Еще код! Для двух изображений
<!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>

melky · #6 (**permalink**) 16.08.2011, 20:22

рекомендую к прочтению
а этот код я нагуглил

<!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>

Severtain · #7 (**permalink**) 16.08.2011, 20:35

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

Severtain · #8 (**permalink**) 16.08.2011, 20:37

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

Severtain · #9 (**permalink**) 16.08.2011, 20:42

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

dmitriymar · #10 (**permalink**) 16.08.2011, 22:19

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

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

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

Форум

Справочник

Discord чат

Курсы javascript