HTML5 kanvas, görüntü çokgende/çokgen olabilir mi?

Question

Çokgen olması ve daha sonra bir görüntüyü renk yerine görüntülemek için javascript html5 kanvasını kullanmanın bir yolu var mı?

Answer 1

bazı araştırmadan sonra, ben ilk önce fillStyle bu deseni ayarlayarak, görüntüyü kullanarak bir desen oluşturarak bunu mümkün olduğuna inanıyorum:

var ctx = canvas.getContext("2d"); 
var pattern = ctx.createPattern(imageObj, "repeat"); 
ctx.fillStyle = pattern; 

Sonra çokgeninizi yaratma meselesi (moveTo kullanarak ve lineTo) ve ardından normal olarak doldurulur.

Kaynak: this plugin 'in kaynak kodu. Feragatname: Çalışmaları onaylamak için kendimi denemedim.

Güncelleme: Hala keyfi bir çokgen sığdırmak için görüntüyü değiştirip değiştiremeyeceğinizi araştırıyorum. (Hiç de bunu mümkünse) zor kısmıdır

ctx.save(); 
ctx.setTransform(m11, m12, m21, m22, dx, dy); 
ctx.drawImage(imageObj); 
ctx.restore(); 

setTransform parametre değerlerini belirleme: Prensip olarak, bunu yapmak için setTransform kullanabilirsiniz. Ben herhangi matematik yaptım beri looong, ama doğru burada hatırlayacak olursak yapılması gerektiğini ne oldu:

|m11 m21 dx| |xI| |xM| 
|m12 m22 dy| X |yI| = |yM| 
| 0 0 1| | 1| | 1| 

: Aşağıdaki matris operasyonu yapardım, her bir nokta için

(0,0) --- (w,0)  (x1,y1) --- (x2,y2) 
    |   |   |   | 
    | Image |  =>  | Morphed | 
    |   |   |   | 
(0,h) --- (w,h)  (x3,y3) --- (x4,y4) 

Sekiz denklem, altı değişken (matris elemanlarının değişken olduğunu hatırla, kalanlar sabittir - bizim girdilerimiz). Çözülemez olabilir. Şimdi deducing (veya Googling veya Math.SE içinde soran ...) ve her bir parametre için formüller uygulanması meselesi ...

Güncelleme 2: Ben o sert kanıtımız yok rağmen , setTransform ile istediğiniz şeyi yapmak imkansız olduğuna inanıyorum. Gimp'in "perspektif" aracıyla nasıl çalıştığına bakarak, görüntünüzü rastgele bir çokgene dönüştürmek için dönüşüm matrisinin üçüncü sırasını da değiştirmek gerekir. Ve Tuval API'sı bunun için bir araç sağlamaz gibi görünmüyor (genellikle sadece affine dönüşümler destekleniyor: çeviri, rotasyon, ölçek, makaslama veya yukarıdakilerin bir kombinasyonu). 2D üzerinde this post aktaran

dönüştürür:

CSS3 2D-Dönüşümler yalnızca Parallelograms içine blokları dönüştürebilir. Örneğin, bir bloğu bu şekle dönüştürmek mümkün değildir: [Düzensiz Şekil] Bunu yapmak için, CSS3 3D Dönüşümleri kullanılmalıdır. Bu nedenle Matrix İnşaat Setinin sadece dört tane değil, sadece sürüklemek için üç kontrol noktası vardır.

CSS 3D Transforms planları vardır, ama sadece ben tuval eleman (2d bağlamıyla, yani - WebGL başka bir hikaye) eğer Bilmiyorum olduğunu desteklenen ne kadar geniş bir bilmiyorum Hiç destekleyecektir. Kısacası, bildiğiniz herhangi bir yolla istediğinizi yapmak mümkün değildir.

Answer 2

Sen context.clip() kullanarak bir görüntü ile bir çokgen doldurabilirsiniz:

//create an image 
    var img = new Image(); 
    img.src = 'imgPath/image.png' 

    //draw the image when loaded 
    img.onload = function(){ 
     var ctx = canvas.getContext("2d"); 
     ctx.save(); 

     //define the polygon 
     ctx.beginPath(); 
     ctx.moveTo(x1,y1); 
     ctx.lineTo(x2,y2); 
     ctx.lineTo(x3,y3); 
     ctx.closePath(); 

     //draw the image 
     ctx.clip(); 
     ctx.drawImage(img, leftMostXCoor, highestYCoor, polyWidth, polyHeight); 

     //fill and stroke are still available for overlays and borders 
     ctx.fill(); 
     ctx.stroke(); 

     ctx.restore(); 
    }