transform() method of canvas


gctx.transform(1,0,0,1,0,0);

ParameterDescriptionUpdate valuePresent value
aHorizontal Scaling
bHorizontal skewing
cVertical skewing
dVertical Scaling
eHorizontal Moving
fVertical Moving
Change the slider values to change parameters of transform and see the effect.

transform() method will have cumulative effect. So any change in transformation matrix will affect over the previous transformation matrix. Our transform() method multiples the current identity matrix with the present arguments and set the final value.

Example : If vertical scaling is set at 0.5 and then again it is given as 1.0, then final transformation matrix will have 1.5 as vertical scaling value .

If you want to apply changes to default value only, then we have to restore the basic setting by using setTransform() method.

In the above demo before the updated matrix is applied by transform() method , setTranform() method is evoked to reset the matrix to default one.

Difference between transfrom() and setTranform()

transform() method does not reset the current transformation matrix and it multiples the given values with the previously set values.
setTranform() reset the previously set ( matrix ) values to the given values.
var my_canvas=$('#my_canvas').get(0)
var gctx = my_canvas.getContext("2d");
var a=1;
var b=0;
var c=0;
var d=1;
var e=0;
var f=0;
gctx.beginPath();
///////////////////////////
my_draw=function my_draw(){	

gctx.clearRect(0, 0, my_canvas.width,my_canvas.height);
gctx.setTransform(1,0,0,1,0,0);

gctx.beginPath();
gctx.transform(a,b,c,d,e,f);
gctx.lineWidth=5;
gctx.strokeStyle='#00ff00';
gctx.rect(150,100,100,30);
gctx.fillStyle='#f00000';
gctx.font='14px Arial';
gctx.fillText('plus2net', 160,120);
gctx.stroke();

$('#slider_a_text').html(a);
$('#slider_b_text').html(b);
$('#slider_c_text').html(c);
$('#slider_d_text').html(d);
$('#slider_e_text').html(e);
$('#slider_f_text').html(f);
$('#t1').html("gctx.transform("+a+","+b+","+c+","+d+","+e+","+f+");");
}

///////////
$( "#slider_a" ).slider({
orientation:'horizontal',
min:-1,
max:+3,
step:0.5,
animate:'slow',
value:a,
disabled:false,
slide: function(event, ui) { 
a=ui.value;
my_draw()
} 
});
///////////////////////////////
///////////
$( "#slider_b" ).slider({
orientation:'horizontal',
min:-1,
max:+1,
step:0.25,
animate:'slow',
value:b,
disabled:false,
slide: function(event, ui) { 
b=ui.value;
my_draw()
} 
});
///////////////////////////////
///////////
$( "#slider_c" ).slider({
orientation:'horizontal',
min:-1,
max:+1,
step:0.25,
animate:'slow',
value:c,
disabled:false,
slide: function(event, ui) { 
c=ui.value;
my_draw()
} 
});
///////////////////////////////
///////////
$( "#slider_d" ).slider({
orientation:'horizontal',
min:0,
max:2,
step:0.1,
animate:'slow',
value:d,
disabled:false,
slide: function(event, ui) { 
d=ui.value;
my_draw()
} 
});
/////////////////
///////////
$( "#slider_e" ).slider({
orientation:'horizontal',
min:-400,
max:+400,
step:50,
animate:'slow',
value:e,
disabled:false,
slide: function(event, ui) { 
e=ui.value;
my_draw()
} 
});
///////////
$( "#slider_f" ).slider({
orientation:'horizontal',
min:-200,
max:+200,
step:50,
animate:'slow',
value:f,
disabled:false,
slide: function(event, ui) { 
f=ui.value;
my_draw()
} 
});
////////////////////
$('#b1').click(function(){
 a=1;
 b=0;
 c=0;
 d=1;
 e=0;
 f=0;
  my_draw();
$( "#slider_a" ).slider({value:a})
$( "#slider_b" ).slider({value:b})
$( "#slider_c" ).slider({value:c})
$( "#slider_d" ).slider({value:d})
$( "#slider_e" ).slider({value:e})
$( "#slider_f" ).slider({value:f})
})
///////////
  my_draw();


plus2net.com




Post your comments , suggestion , error , requirements etc here .




We use cookies to improve your browsing experience. . Learn more
HTML MySQL PHP JavaScript ASP Photoshop Articles FORUM . Contact us
©2000-2020 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer