使用坐标变换

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>使用坐标变换</title>
</head>
<body>
    <canvas id="ourCanvas" width="1100" height="1100" style="border:3px dashed #0094ff"></canvas>
    <script>
        //save()保存当前绘图状态
        //restore()恢复之前保存的绘图状态
        var canvas = document.getElementById("ourCanvas");
        var ctx = canvas.getContext("2d");
        ctx.fillStyle = "rgba(255,0,0,0.3)";
        //图形绘制
        ctx.translate(30, 200);
        for (var i = 0; i < 50; i++) {
            ctx.translate(50, 50);
            ctx.scale(0.93, 0.93);
            ctx.rotate(-Math.PI / 10);
            ctx.fillRect(0, 0, 150, 75);
        }
    </script>
</body>
</html>