xrmx/ocanvas-test-rotate.html

## ocanvas-test-rotate.html
<html>
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.transit/0.1.3/jquery.transit.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/ocanvas/2.2.1/ocanvas.min.js"></script>
<script>
$(document).ready(function() {
    var canvas = oCanvas.create({
        canvas: '#foo'
    });

    var arc = canvas.display.arc({
        x: canvas.width / 2,
        y: canvas.height / 2,
        radius: 10,
        start: 0,
        end: 90,
        /*fill: '#f00'*/
        stroke: '20px #f00'
    });
    canvas.addChild(arc);
    var arc2 = canvas.display.arc({
        x: canvas.width / 2 + 20,
        y: canvas.height / 2 + 20,
        radius: 5,
        start: 50,
        end: 12,
        stroke: '10px #0cf'
    });
    canvas.addChild(arc2);

    arc.bind('mouseenter', function() {
        $('p').append("mousenter!");
    });
    arc2.bind('mouseenter', function() {
        $('p').append("mousenter2!");
    });
    $('#button').click(function() {
        $('#wrapper').transition({ rotate: '60deg', duration: '1000'});
    });
});
</script>

</head>
<body>
<div id="wrapper">
<canvas id="foo" width="100" height="100" style="position: absolute; left:500px; top: 500px; background-color: #000"></canvas>
<a href="#" id="button">rotate</a>
</div>
<p style="position:absolute; bottom: 50px; left:50px;"></p>
</body>
</html>
	<html>
	<head>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.transit/0.1.3/jquery.transit.min.js"></script>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/ocanvas/2.2.1/ocanvas.min.js"></script>
	<script>
	$(document).ready(function() {
	var canvas = oCanvas.create({
	canvas: '#foo'
	});

	var arc = canvas.display.arc({
	x: canvas.width / 2,
	y: canvas.height / 2,
	radius: 10,
	start: 0,
	end: 90,
	/fill: '#f00'/
	stroke: '20px #f00'
	});
	canvas.addChild(arc);
	var arc2 = canvas.display.arc({
	x: canvas.width / 2 + 20,
	y: canvas.height / 2 + 20,
	radius: 5,
	start: 50,
	end: 12,
	stroke: '10px #0cf'
	});
	canvas.addChild(arc2);

	arc.bind('mouseenter', function() {
	$('p').append("mousenter!");
	});
	arc2.bind('mouseenter', function() {
	$('p').append("mousenter2!");
	});
	$('#button').click(function() {
	$('#wrapper').transition({ rotate: '60deg', duration: '1000'});
	});
	});
	</script>

	</head>
	<body>
	<div id="wrapper">
	<canvas id="foo" width="100" height="100" style="position: absolute; left:500px; top: 500px; background-color: #000"></canvas>
	<a href="#" id="button">rotate</a>
	</div>
	<p style="position:absolute; bottom: 50px; left:50px;"></p>
	</body>
	</html>