如何将Canvas裁剪区域移动至左上角或其他指定位置

我想把Canvas上已裁剪的部分绘图移动到左上角，尝试用translate、setTransform方法都没成功——translate在clip操作前有效，但clip后就没法移动裁剪区域了，论坛里也找不到相关示例代码。

用户提供的原始代码：

<html>
<body>

<canvas id="myCanvas" width="400" height="300" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

ctx.fillStyle = "yellow";
ctx.fillRect(100, 100, 150, 100)

ctx.setTransform(1,0.5, -0.2, 1, 60, 10);
ctx.fillStyle = "blue";
ctx.fillRect(100, 100, 150, 100);

ctx.beginPath();
ctx.rect(100, 100, canvas.width,canvas.height);
ctx.clip();
ctx.setTransform(1,0.5, -0.2, 1, 60, 10);

ctx.translate(-100,-100);

</script>

</body>
</html>

修复方案 #

核心问题是：Canvas的裁剪区域基于当前变换矩阵创建，clip()生效后，后续变换只影响新绘制内容，无法修改已存在的裁剪区域。要实现“把裁剪后的内容移到左上角”，得先调整坐标系，让裁剪区域对应画布左上角，再重新绘制内容。

调整后的代码：

<html>
<body>

<canvas id="myCanvas" width="400" height="300" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

// 1. 先绘制原始图形（可选，保留用于对比效果）
ctx.fillStyle = "yellow";
ctx.fillRect(100, 100, 150, 100);

ctx.setTransform(1, 0.5, -0.2, 1, 60, 10);
ctx.fillStyle = "blue";
ctx.fillRect(100, 100, 150, 100);

// 2. 保存当前画布状态，避免后续操作污染全局上下文
ctx.save();

// 3. 关键：平移坐标系，把原裁剪区域的起点(100,100)映射到画布左上角(0,0)
ctx.translate(-100, -100);
// 设置裁剪区域，此时裁剪的就是原画布(100,100)开始的区域
ctx.beginPath();
ctx.rect(0, 0, c.width, c.height);
ctx.clip();

// 4. 恢复原始绘制的变换矩阵，确保内容样式和原图形一致
ctx.setTransform(1, 0.5, -0.2, 1, 60, 10);
// 重新绘制蓝色矩形，会被裁剪并显示在左上角
ctx.fillStyle = "blue";
ctx.fillRect(100, 100, 150, 100);

// 重置变换，绘制黄色矩形到裁剪后的左上角位置
ctx.setTransform(1, 0, 0, 1, 0, 0);
ctx.fillStyle = "yellow";
ctx.fillRect(100, 100, 150, 100);

// 5. 恢复画布状态，清除裁剪和变换
ctx.restore();
</script>

</body>
</html>

关键要点 #

• 先平移坐标系再设置裁剪区域，让要截取的内容区域对应画布左上角。
• 重新绘制时复用原始的变换参数，保证内容和原图形的样式、形变一致。
• 用save()和restore()管理画布状态，避免裁剪和变换影响其他绘图逻辑。

内容的提问来源于stack exchange，提问作者Jay