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