html5 canvas strokeStyle？

Question

我试图将图像映射到使用strokeStyle和canvas来模拟布料的“3d”网格，我包含图像，但它目前充当背景图像，实际上并没有像“涟漪”一样流动“布料” IE的图像在网格流动时是静态的。 这是jsfiddle这是自我解释（只适用于Chrome）。 任何帮助，非常感谢。 这里呈现的图像为背景的JavaScript，如何从绘制作为背景图像停止，只有使其填补了电网？：

function update() { 

    var img = new Image(); 
    img.src = 'http://free-textures.got3d.com/architectural/free-stone-wall- textures/images/free-stone-wall-texture-002.jpg'; 
    img.onload = function() { 

     // create pattern 
     var ptrn = ctx.createPattern(img, 'repeat'); 

     ctx.clearRect(0, 0, canvas.width, canvas.height); 

     physics.update(); 

     ctx.strokeStyle = ptrn; 
     ctx.beginPath(); 
     var i = points.length; 
     while (i--) points[i].draw(); 
     ctx.stroke(); 

     requestAnimFrame(update); 
    } 
} 

赫斯是原来codepen我的工作。 `更新fiddle带图像外功能更新（）： 它目前似乎实际上填充细胞以及应用它作为背景图像。有没有办法阻止它成为一个背景图像，并只应用它来填补网格？我试过这个：
ctx.fillStyle = ptrn; 和删除行260：
ctx.strokeStyle = ptrn; 但它似乎删除背景图像只是将其显示为黑色网格...再次感谢您的耐心

Answer 1

哦，我的！伟大的问题！

让我们看看我们有什么。一系列有“约束”的系统，它是2点的集合。 Contraints本身成对出现，并且它们形成两条线，形成一个┘形状（框的右下角）。

如果我们绘制每个约束线分别，我们会看到这一点：

这是所有水平的红色线和垂直蓝线。我们只画出一个单一的形状┘，并且每条长长的红色线条确实有数百条小线条，每条线条的底部形状为头尾。这里有几百个┘，它们一起使它看起来像一个粘合网。事实上，每个人都已经是个人，这使我们很容易。

该形状就是我们需要确定的一种排序边界框。而且它看起来像中的每个Constraint都带有原始值，因此我们将它们保存为sx和sy。

如果我们知道盒子在新位置的边界，并且我们知道原始边界，因为我们已经保存了Contraints的所有Point值，那么我们应该是黄金。

一旦我们有一个约束和其目前的边界框，原来边框为什么，我们所要做的就是调用drawImage方法有两个框：ctx.drawImage(img, sx, sy, sw, sh, dx, dy, dw, dh);

我写了一个新的Constraint.prototype.draw程序，它看起来像这样：

等。

有几个方法，你可以“打补丁”的孔，它真的给你，否则你必须与转换来欺骗。

看一看代码。我没有太多变化。在代码（我的编辑）和代码DEBUG:中寻找!!!（调试代码，以防图像未加载或想要看到线框）。

http://jsfiddle.net/simonsarris/Kuw6P/

的代码是很长，所以我不想贴吧都在这里，但这里的情况下的jsfiddle备份的状态为Down：https://gist.github.com/simonsarris/5405304

这里是最相关的部分：

// !!! new super awesome draw routine! So cool we skipped naming it draw2! 
Constraint.prototype.draw3 = function(otherP2) { 

    // NOW dear friends consider what we have. Each box is made out of two lines, 
    // the bottom and rightmost ones. 
    // From these lines we can deduce the topleft and bottom-right points 
    // From these points we can deduce rectangles 
    // From the skewed rectangle vs the original rectangle we can "stretch" 
    // an image, using drawImage's overloaded goodness. 

    // AND WE'RE OFF: 

    // destination rect has 2 points: 
    //top left: Math.min(this.p2.x, otherP2.x), Math.min(this.p2.y, otherP2.y) 
    //bottom right: (this.p1.x, this.p1.y) 

    // image destination rectangle, a rect made from the two points 
    var dx = Math.min(this.p1.x, Math.min(this.p2.x, otherP2.x)); 
    var dy = Math.min(this.p1.y, Math.min(this.p2.y, otherP2.y)); 
    var dw = Math.abs(this.p1.x - Math.min(this.p2.x, otherP2.x)); 
    var dh = Math.abs(this.p1.y - Math.min(this.p2.y, otherP2.y)); 
    // DEBUG: IF THERE IS NO IMAGE TURN THIS ON: 
    //ctx.strokeStyle = 'lime'; 
    //ctx.strokeRect(dx, dy, dw, dh); 

    // source rect 2 points: 
    //top left: Math.min(this.p2.sx, otherP2.sx), Math.min(this.p2.sy, otherP2.sy) 
    //bottom right: (this.p1.sx, this.p1.sy) 

    // these do NOT need to be caluclated every time, 
    // they never change for a given constraint 
    // calculate them the first time only. I could do this earlier but I'm lazy 
    // and its past midnight. See also: http://www.youtube.com/watch?v=FwaQxDkpcHY#t=64s 
    if (this.sx === undefined) { 
    this.sx = Math.min(this.p1.sx, Math.min(this.p2.sx, otherP2.sx)); 
    this.sy = Math.min(this.p1.sy, Math.min(this.p2.sy, otherP2.sy)); 
    this.sw = Math.abs(this.p1.sx - Math.min(this.p2.sx, otherP2.sx)); 
    this.sh = Math.abs(this.p1.sy - Math.min(this.p2.sy, otherP2.sy)); 
    } 
    var sx = this.sx; 
    var sy = this.sy; 
    var sw = this.sw; 
    var sh = this.sh; 
    // DEBUG: IF THERE IS NO IMAGE TURN THIS ON: 
    //ctx.strokeStyle = 'red'; 
    //ctx.strokeRect(sx, sy, sw, sh); 


    // IF we have a source and destination rectangle, then we can map an image 
    // piece using drawImage(img, sx, sy, sw, sh, dx, dy, dw, dh) 
    // Only problem, we're not exactly dealing with rectangles.... 
    // But we'll deal. Transformations have kooties anyways. 
    ctx.drawImage(img, sx, sy, sw, sh, dx, dy, dw, dh); 
};