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 в ие фильтры