Library
Functions / rotate
rotate(angle, [x1], [y1], [duration], [easing], [onstep], [fn])
rotate(int angle)
return: object
Rotate jCanvaScript object round a point (0, 0) on the given angle.
Code
<script type="text/javascript">
function start_1(idCanvas)
{
jc('#myRect_1')
.rotate(5);
}
function stop_1(idCanvas)
{
jc('#myRect_1')
.rotate(-5);
}
function onload_1(idCanvas)
{
jc.start(idCanvas,true);
jc.rect(20,30,50,30,'#ff0000',1)
.id('myRect_1');
}
</script>
<canvas id="canvas_1" width="250px" height="265px">
</canvas>
View
rotate(int angle, float x1, float y1)
return: object
Rotates a jCanvaScript object round a point (x1, y1) on the given angle.
Code
<script type="text/javascript">
function start_2(idCanvas)
{
jc('#myRect_2')
.rotate(30,100,120);
}
function stop_2(idCanvas)
{
jc('#myRect_2')
.rotate(-30,100,120);
}
function onload_2(idCanvas)
{
jc.start(idCanvas,true);
jc.rect(100,120,50,30,'#ff0000',1)
.id('myRect_2');
}
</script>
<canvas id="canvas_2" width="250px" height="265px">
</canvas>
View
rotate(int angle, string 'center')
return: object
Rotates a jCanvaScript object round its center.
Code
<script type="text/javascript">
function start_3(idCanvas)
{
jc('#myRect_3')
.rotate(30,'center');
}
function stop_3(idCanvas)
{
jc('#myRect_3')
.rotate(-30,'center');
}
function onload_3(idCanvas)
{
jc.start(idCanvas,true);
jc.rect(100,120,50,30,'#ff0000',1)
.id('myRect_3');
}
</script>
<canvas id="canvas_3" width="250px" height="265px">
</canvas>
View
rotate(int angle, string 'center', array point)
return: object
Rotates jCanvaScript object round a point drifted concerning center of object on point.x and point.y, on the given angle.
Code
<script type="text/javascript">
function start_4(idCanvas)
{
jc('#myRect_4')
.rotate(30,'center',{x:25,y:-15});
}
function stop_4(idCanvas)
{
jc('#myRect_4')
.rotate(-30,'center',{x:25,y:-15});
}
function onload_4(idCanvas)
{
jc.start(idCanvas,true);
jc.rect(100,120,50,30,'#ff0000',1)
.id('myRect_4');
}
</script>
<canvas id="canvas_4" width="250px" height="265px">
</canvas>
View
rotate(int angle, float x1, float y1, positive int duration, object easing, object onstep, function fn)
return: object
Allows to animate rotation of the object. It is an alias of .animate() function. See examples of it for more information about different parameters of the function.
Code
<script type="text/javascript">
function start_5(idCanvas)
{
jc('#myRect_5')
.rotate(30,'center',{x:25,y:-15},600);
}
function stop_5(idCanvas)
{
jc('#myRect_5')
.rotate(-30,'center',{x:25,y:-15},600);
}
function onload_5(idCanvas)
{
jc.start(idCanvas,true);
jc.rect(100,120,50,30,'#ff0000',1)
.id('myRect_5');
}
</script>
<canvas id="canvas_5" width="250px" height="265px">
</canvas>
View