canvas图形变换很多时候，我们绘制出一个图形之后，并不能达到我们预期的效果，这个时候，适当地运用图形的变换，可以创建

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #mycanvas{
            border:1px solid red;
        }
    </style>
</head>
<body>
    <canvas id="mycanvas" width="1000px" height="1000px">

    </canvas>
    <script>
        var mycanvas=document.getElementById("mycanvas");
        var cxt=mycanvas.getContext("2d");
        // 平移
        //第一个参数是水平偏移
        //第二个参数是垂直偏移
        cxt.translate(10,10);
        // 坐标系旋转
        cxt.rotate(Math.PI/10);

        cxt.beginPath();
        cxt.fillStyle="yellow";
        cxt.fillRect(200,200,100,100);
        cxt.fill();
        cxt.closePath();
        // 保存当前cxt状态
        cxt.save();

        cxt.beginPath();
        cxt.fillStyle="pink";
        cxt.fillRect(0,0,100,100);
        cxt.fill();
        cxt.closePath();

        //应用保存前的状态
        cxt.restore();
        // 如果没有应用保存的状态，那么下一个正方形填充颜色将会是粉色，现在应用了，就和保存的颜色一样，就是黄色

        cxt.beginPath();
        cxt.fillRect(100,100,100,100);
        cxt.fill();
        cxt.closePath();
        
       
        cxt.strokeRect(200,0,100,200)
        // 缩放
        // 第一个参数是x轴的缩放倍数
        // 第二个参数是y轴的缩放倍数
        cxt.scale(2,2);
        cxt.strokeRect(200,0,100,200)
    </script>
</body>
</html>0