html5 canvas strokeStyle? ,

Question

ben strokeStyle ve tuval kullanarak bez taklit bir "3d" ızgaraya bir görüntü eşlemek çalışıyorum ben görüntü dahil ettik ancak şu anda bir arka plan görüntüsü olarak davranmaktadır ve dalgalanmalar olduğu gibi aslında "bez" ile akan değil IE, ızgara akarken görüntü statiktir. , kendiliğinden açıklayıcı olan (yalnızca Chrome'da çalışır) jsfiddle. herhangi bir yardım çok takdir edilmektedir. burada arka plana görüntü vermektedir javascript, Nasıl bir arka plan görüntüsü olarak render durdurmak ve yalnızca o ızgara ?: Kızın ben den çalışıyorum orijinal codepen var

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

doldurtunuz. Şu anda aslında bir arka plan resmi olarak uygulayarak yanı sıra hücreleri doldurmak gibi görünüyor : `fonksiyon güncelleme() dış görüntü ile fiddle güncellendi. Bir arka plan görüntüsü olmak ve sadece ızgarayı doldurmak için uygulamak için herhangi bir yolu var mı? Bunu denedim:
ctx.fillStyle = ptrn; ve satır 260:
kaldırarak ctx.strokeStyle = ptrn; ama ... sadece siyah ızgara olarak görüntülendiği arka plan resmini kaldırın sabır

Answer 1

Aman için tekrar teşekkür görünüyor! Harika soru!

Yani elimizdeki bakalım. 2 noktadan oluşan bir dizi "kısıtlama" olan bir sistem. Kontrendikasyonlar çift olarak gelirler ve iki satır oluştururlar, bir ┘ şeklini oluştururlar (bir kutunun sağ alt köşesi). Her kısıt çizgi çizmek için olsaydı

bireysel Bunu görmek istiyorum: Bütün yatay kırmızı çizgiler ve dikey mavi çizgiler var

. Tek bir resim çizdiğimizde, sadece ┘ şeklinin ve her uzun kırmızı çizginin yüzlerce küçük çizgi olduğunu görürüz, her bir ┘ şeklin alt tarafı, uçtan uca. Burada birkaç yüz ┘ s var ve birlikte yapışık bir ağa benzetiyorlar. Her birinin zaten bireysel olması, bizim için bunu kolaylaştırır.

Bu şekil, bir çeşit sınırlayıcı kutuyu belirlememiz için gereken tek şeydir. Ve bu Constraint her Point özgün değerlerle geliyor gibi, bu yüzden sx ve sy sıra bu tasarruf edersiniz görünüyor.

biz onların yeni yerde kutuları sınırlarını biliyorsanız, ve biz contraints için tüm Point'in değerlerini kaydettikten beecause orijinal sınır tanımaz, o zaman altın olmalıdır. Yeni Constraint.prototype.draw rutin yazdı

ctx.drawImage(img, sx, sy, sw, sh, dx, dy, dw, dh);, Bu şuna benzer: Biz Kısıtlama ve mevcut sınırlayıcı kutunun, orijinal sınırlama kutusunu aldıktan sonra

neden yapmamız gereken tüm her iki kutuları ile çağrı drawImage olduğunu :

Ve böyle devam eder.

Deliklerin "yama" yapabilmesinin birkaç yolu vardır ve gerçekten size kalmış, aksi takdirde dönüşümler ile uğraşmak zorunda kalacaksınız.

Kodu inceleyin. Ben fazla değişmedim. Kodda (benim düzenlemelerim) !!! ve kodda DEBUG:'u arayın (görüntünün yüklenmemesi durumunda hata ayıklama kodu veya tel kafesleri görmek istiyorsanız).

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

kod yüzden buraya gelmek istiyorum hepsini yapıştırmak yok uzundur, ama burada durum jsfiddle yedek bir aşağı gider var: https://gist.github.com/simonsarris/5405304

Ve burada en alakalı kısmı:

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