<!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>