前端提高篇：HTML进阶9：canvas画布基本知识操作图形：坐标轴保存恢复，变换，擦除，组合
warning:
这篇文章距离上次修改已过206天，其中的内容可能已经有所变动。
<!DOCTYPE html>
<html>
<head>
<title>Canvas 画布操作图形：坐标轴保存与恢复</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="400" style="border:1px solid #000000;"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
// 绘制一个红色的矩形
ctx.fillStyle = 'red';
ctx.fillRect(50, 70, 150, 100);
// 保存当前坐标轴的状态
ctx.save();
// 进行坐标轴的旋转和平移
ctx.translate(100, 100);
ctx.rotate(Math.PI / 4);
// 绘制一个蓝色的矩形
ctx.fillStyle = 'blue';
ctx.fillRect(0, 0, 150, 100);
// 恢复之前保存的坐标轴状态
ctx.restore();
// 绘制一个绿色的矩形，此时坐标轴恢复到了之前的状态
ctx.fillStyle = 'green';
ctx.fillRect(150, 170, 150, 100);
</script>
</body>
</html>这段代码首先在画布上绘制了一个红色的矩形，然后保存了当前的坐标轴状态。接着进行了旋转和平移坐标轴操作，并绘制了一个蓝色的矩形。最后，使用restore()方法恢复了之前保存的坐标轴状态，然后绘制了一个绿色的矩形以验证坐标轴状态的恢复。这个例子展示了如何在操作图形时保存和恢复坐标轴的状态，这对于复杂的绘图操作是非常有用的。
评论已关闭