HTML5キャンバス、イメージオン/ポリゴン可能ですか？

Question

javascript html5キャンバスを使用してポリゴンを作成し、カラーの代わりにイメージを表示する方法はありますか？

Answer 1

いくつかの研究の後、私はそれが最初fillStyleにそのパターンを設定し、その後、自分の画像を使用してパターンを作成することであることを行うことは可能だと信じ：

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

そして、それはmoveToを使用して（あなたのポリゴンを作成するだけですlineTo）、それを通常どおりに充填してください。

ソース：this pluginのソースコード。免責事項：それが動作することを確認するために自分自身を試していない。

更新：私はまだ任意のポリゴンに合わせて画像を操作できるかどうかを調べています。原則として、あなたはそれを行うためにsetTransformを使用することができます。

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

がsetTransformパラメータの値を決定する（それが可能だと、すべてのことを行うには）トリッキーな部分です。

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

各点について、次の行列演算を行うだろう：それは私がに任意の数学をやったので、looongあったが、私はここに正しくリコール場合は何をすべきかだだ

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

8つの方程式、6つの変数（行列要素が変数であることを覚えている、残りは定数 - 入力）。解決できないかもしれません。今度は、推論（またはグーグル、またはMath.SE ...の質問）を行い、各パラメータの公式を実装するだけです。 setTransformであなたがしたいことをするのは不可能だと私は信じています。 Gimpが "perspective"ツールで行うことを見ると、画像を任意のポリゴンに変換するために変換行列の3行目も変更する必要があります。キャンバスAPIはそのための手段を提供していないようです（通常、アフィン変換のみサポートされています：翻訳、回転、スケール、シアー、または上記の組み合わせ）。 2Dにthis postを引用

は変換：

CSS3 2D-トランスフォームは平行四辺形にブロックを変換することができます。たとえば、ブロックをこの図形に変換することは不可能です： [不規則な形] これを行うには、CSS3の3D変形を使用する必要があります。このため、マトリックス構築セットには、4つではなく3つのコントロールポイントがあります。

ありCSS 3D Transformsのための計画があるが、私は広くcanvas要素は、（2Dコンテキストで、つまり - WebGLのはまた別の話である）場合、私は知らない、であることはサポート方法がわからないだけでなく、今までそれをサポートしています。要するに、私が知っている何らかの手段であなたが望むことをすることはできません。

Answer 2

あなたはcontext.clip()を使用してイメージでポリゴンを塗りつぶすことができます。

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