canvas中的变换

注意：canvas中变换的都是坐标系；

translate()平移坐标系：

< script >
    var  canvas =  document . getElementById ( "canvas" );
    var  ctx = canvas . getContext ( "2d" );

    ctx . translate ( 50 , 50 );
    ctx . translate ( 50 , 50 );
    ctx . strokeRect ( 0 , 0 , 300 , 200 );

    ctx . beginPath ();
    ctx . translate ( - 100 , - 100 );
    ctx . strokeRect ( 0 , 0 , 300 , 200 );
</ script >

rotate旋转坐标系

< script >
    var  canvas =  document . getElementById ( "canvas" );
    var  ctx = canvas . getContext ( "2d" );

    ctx . rotate ( Math . PI / 4 );
    ctx . rotate ( - Math . PI / 4 );
    ctx . strokeRect ( 0 , 0 , 300 , 200 );
</ script >

旋转示例：

< script >
    var  canvas =  document . getElementById ( "canvas" );
    var  ctx = canvas . getContext ( "2d" );
    ctx . strokeStyle = "pink" ;

    //1 、平移坐标系到矩形的中心点
    ctx . translate ( 150 , 100 );
    var  timer= setInterval ( function (){
        ctx . rotate ( 0.01 * Math . PI );
        //2 、绘制矩形
        ctx . strokeRect ( - 150 , - 100 , 300 , 200 );
    }, 10 );

</ script >

scale伸缩变换

< script >
    var  canvas =  document . getElementById ( "canvas" );
    var  ctx = canvas . getContext ( "2d" );
    // 变成一个竖起来的椭圆
    ctx . scale ( 0.5 , 1 );
    ctx . arc ( 150 , 300 , 150 , 0 , 2 * Math . PI );
    ctx . stroke ();
</ script >

伸缩变换示例demo2

< script >
    var  canvas =  document . getElementById ( "canvas" );
    var  ctx = canvas . getContext ( "2d" );

    ctx . scale ( 0.5 , 0.5 );

    ctx . strokeStyle = "red" ;
    ctx . strokeRect ( 0 , 0 , 1600 , 1200 );

    ctx . beginPath ();
    ctx . strokeStyle = "blue" ;
    ctx . strokeRect ( 0 , 0 , 800 , 600 );

</ script >