let canvas = document.createElement('canvas');
canvas.height = 500;
canvas.width = 500;
canvas.style.backgroundColor = 'white'
document.body.appendChild(canvas);
ctx = canvas.getContext('2d');
console.log(ctx);
ctx.fillRect(0,0,10,10);
ctx.save(); // 保留变换的初始化状态，
ctx.fillStyle='blue'
ctx.translate(200,200);
ctx.rotate(1)
ctx.fillRect(0,0,100,100);
ctx.restore() // 将变换恢复到初始状态
// 红色的画布中心被重置了
ctx.fillStyle='red'
ctx.fillRect(10,10,10,10);
<html>
<body>
</body>
</html>