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 with image outside function update（）： 它目前似乎实际上填充单元格以及将其应用为背景图像。有没有办法阻止它成为背景图像，只应用它来填充网格？我试过这个：
   ctx.fillStyle = ptrn; 并删除第260行：
ctx.strokeStyle = ptrn; 但它似乎删除了背景图像只是将其显示为黑色网格...再次感谢您的耐心

Answer 1

哦，我的！好问题！

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

如果我们要单独绘制每条约束线，我们会看到：

这是所有水平红线和垂直蓝线。绘制一个单一的，我们只看到┘形状，每条长红线实际上是数百条小线，每个┘形状的底部，端到端。这里有几百┘个，它们一起使它看起来像一个有凝聚力的网格。事实上，每个人都已经是个人，这对我们来说很容易。

我们需要确定这种形状以确定一种类型的边界框。看起来Point中的每个Constraint都带有原始值，因此我们会将其保存为sx和sy。

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

一旦我们得到了一个Constraint及其当前边界框的原始边界框，为什么，我们所要做的就是用两个框调用drawImage：ctx.drawImage(img, sx, sy, sw, sh, dx, dy, dw, dh);

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

等等。

有几种方法可以“修补”这些洞，它真的取决于你，否则你将不得不通过转换来实现。

看看代码。我的变化不大。在代码中寻找!!!（我的编辑）和代码中的DEBUG:（如果图像没有加载或你想看到线框，请调试代码。）

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

代码很长，所以我不想把它全部粘贴在这里，但这里有一个备份，以防jsfiddle发生故障：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);
};