Javascript 如何在画布中裁剪图像（帧）

我在一个图像中有多个帧。如何在画布中绘制图像的裁剪

派对扫兴者是指画布通过CSS伸展和响应。例如：

比如说，每帧是100x100px，我想画“5”帧。所以我必须画框架以下位置：x100，y200，宽度100，高度100

我的代码如下所示：

this.ctx = this.canvas.get(0).getContext("2d");
this.ctx.drawImage(this.image, - this.imageWidth * x, - this.imageHeight * y, this.image.width, this.image.height);

---

在我的控制台中，所有值都是正确的，但结果是杰克·拉屎。我对drawImage的解释有误吗？

为什么使用负值

对于“5”，您应使用：

this.ctx.drawImage(this.image, 100, 100);

或者如果您的雪碧尺寸不合适：

this.ctx.drawImage(this.image, 100, 100, 100, 100);

drawImage的文档：

---

这必须是画布吗？我看不出有什么原因，你不是在画画。为什么不使用CSS3精灵？有两个原因：功能绑定到一个卷轴上，我不能调整我的精灵的大小。正确地在响应容器中。您当然仍然可以使用CSS精灵，方法是相对于响应容器的大小操纵

backgroundPosition

。忘了清楚地说明这一点，

backgroundPosition

也会取百分比值。。。。