移动图案帆布

的起始位置我有一个代码：移动图案帆布

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(); 
}

我如何才能将图形图像的开始位置？

来源

2011-10-08 GLeBaTi

您可以通过翻译在画布上绘制来，然后转换回你开始的地方实现这一目标：

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(); 
}

来源

2011-10-08 20:57:43 Xenethyl

@GLeBaTi我刚刚编辑了我稍微发布在这里的代码。重要的变化是对'fillRect（）'的调用只会填充您请求的大小的区域（即'fill_x'和'fill_y'），因为我们将原点传递为偏移量。我还调整了用于翻译调用的偏移量的符号，使结果更加直观。 – Xenethyl

针对接受的答案：不是撤消偏移，我会用save() & restore()以避免潜在的问题：

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

来源

2013-03-12 00:46:05 cacheflowe

'save'和'restore'似乎更加整洁。 – mokagio

对于像应用单个转换到上下文那样微不足道的东西，我不推荐使用'save（）'和'restore（）'。与操纵状态堆栈相关的开销（尽管很小），并且如果你对每一个简单的转换都这样做，你将会受到不必要的性能影响。看到这个jsPerf（我不记得）快速比较：http://jsperf.com/canvas-transform-vs-save-restore/2 – Xenethyl

稍微超过一年后，上面的性能测试现在说保存/恢复比重新翻译更快（至少在OS X上的Firefox和Chrome上）。对于这样简单的事情，性能问题不一定会胜过简单性和可读性。但是，与任何代码一样，我们都有我们的个人喜好:) – cacheflowe

更一般的，模式都是独自轻松完成复杂的变换。窍门是在调用fill（）或stroke（）之前立即执行它们。

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(); 
}

来源

2016-11-16 18:06:25

移动图案帆布

回答

相关问题