画布矩形背景图像

Question

我想在画布中将背景图像设置为我的矩形。 到目前为止我已经做到了。

var img = new Image()
    img.src = //Source of an image.
var newPattern = ctx.createPattern(img, "no-repeat");
ctx.fillStyle = newPattern;

它有效，但问题是，它将图像应用于画布，而不是矩形。

每当我改变矩形的位置时，图像都保持在相同的位置。

任何人都可以建议如何解决此问题，因此图像会附加到矩形。

Answer 1

如果您只想在指定的矩形内绘制图像，可以执行以下操作。

context.rect(x, y, width, height);
context.clip();
context.drawImage(img, 0, 0);

这将在（x，y）处创建一个矩形，其大小（宽度，高度）用于将来对上下文的所有调用。如果要停止剪辑，则需要添加

context.save();

在上面的代码之前

然后是

context.restore();

绘制图像后。

JSFiddle

编辑：更新为rect