Html 移动画布图案的起始位置

我有一个密码：

function draw(ctx) {
  // create new image object to use as pattern
  var img = new Image();
  img.onload = function(){
    // create pattern
    var ptrn = ctx.createPattern(img,'repeat');
    ctx.fillStyle = ptrn;
    ctx.fillRect(0,0,150,150);
  }
  img.src = 'images/wallpaper.png?' + new Date().getTime();
}

---

如何移动图案图像的起始位置？

您可以通过转换画布，在画布上绘制，然后将其转换回起始位置来实现这一点：

function draw(ctx) {
    // create new image object to use as pattern
    var img = new Image();
    img.onload = function(){
        // create pattern
        var ptrn = ctx.createPattern(img,'repeat');
        ctx.fillStyle = ptrn;

        // offset vars
        var offset_x = 60;
        var offset_y = 75;
        var fill_x = 500; // could be canvas.width
        var fill_y = 500; // could be canvas.height

        // offset
        ctx.translate(offset_x, offset_y);

        // draw
        ctx.fillRect(-offset_x, -offset_y, fill_x, fill_y);

        // undo offset
        ctx.translate(-offset_x, -offset_y);
    }
    img.src = 'images/wallpaper.png?' + new Date().getTime();
}

---

作为对公认答案的回应：我将使用

save（）

和

restore（）

来避免潜在问题，而不是撤消偏移：

ctx.save();
ctx.translate(offset_x, offset_y);
ctx.fillRect(-offset_x, -offset_y, fill_x, fill_y);
ctx.restore();

---

更一般的是，仅对模式进行复杂的转换是很容易完成的。诀窍是在调用fill（）或stroke（）之前立即执行这些操作

---

@GLeBaTi我只是稍微编辑了我在这里发布的代码。重要的变化是对

fillRect（）

的调用只填充所请求大小的区域（即

fill\u x

和

fill\u y

），因为我们将原点作为偏移量传入。我还调整了用于translate调用的偏移量上的符号，以使结果更直观。

save

和

restore

似乎是一种更整洁的方法。对于像对上下文应用单个转换这样的小事，我不建议使用

save（）

和

restore（）

。操作状态堆栈会带来一定的开销（尽管很小），如果对每个简单的转换都这样做，则会带来不必要的性能损失。请看这个jsPerf（我不相信它）进行快速比较：一年多一点之后，上面的perf测试现在表明保存/恢复比重新翻译快（至少在OS X上的Firefox和Chrome中是如此）。对于这样简单的东西，性能问题不一定会胜过简单性和可读性。但是，与任何代码一样，我们都有自己的个人偏好：）

function draw(ctx) {
    // create new image object to use as pattern
    var img = new Image();
    img.onload = function(){
        // create pattern
        var ptrn = ctx.createPattern(img,'repeat');
        ctx.fillStyle = ptrn;
        ctx.beginPath();
        ctx.rect(0, 0, 150, 150);

        ctx.translate(-33, -33);
        ctx.fill();
    }

    img.src = 'images/wallpaper.png?' + new Date().getTime();
}