javascript - Canvas 矩形背景图像

Question

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

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

它确实有效，但问题是，它将图像应用到 Canvas ，而不是矩形。

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

任何人都可以建议如何解决这个问题，以便将图像附加到矩形上。

Answer 1

如果你只想在指定的矩形内绘制图像，你可以这样做。

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

这会在 (x, y) 处创建一个大小为(宽度、高度)的矩形，用于将来对上下文的所有调用。如果你想停止剪辑，你需要添加一个

context.save();

在上面的代码之前，然后是

context.restore();

绘制图像后。

JSFiddle

编辑:更新为矩形