JavaScriptのキャンバスは、私は次のような問題を持っているテキスト

を変革します台形にします。は、ここに私が試したものです：JavaScriptのキャンバスは、私は次のような問題を持っているテキスト

context.beginPath(); 
context.moveTo(0, 0); 
context.lineTo(200, 0); 
context.lineTo(100, -100); 
context.lineTo(0, -100); 
context.closePath(); 
context.clip(); 
context.fillText("Hello World", this.x, this.y);

ご想像のとおり、テキストが切り取ら代わりの形状に合うように変換します。以下は、私がやろうとしてと私は何をするために管理しています何の画像です。

すべてのヘルプは高く評価され:)

私がやることをどうにか何：

私が何をしたい：

出典

2017-02-09 rocket_doge_

http://stackoverflow.com/questions/14305104/how-to-do-perspective-：imageData方法について

MDNのリソースは、キャンバスのレンダリングコンテキストページの「ピクセル操作」のサブセクションでありますビューと-HTML5キャンバスがお手伝いします。 Canvas2dはそのような透視変換をサポートしていません。 – defghi1977

あなたは何ができるか取得することですあなたは、通常のテキストを配置するダミーcanvas要素は、その後、あなたはの画素カラー値に独自の数学を適用することができますあなたはtransformedTextCtx.putImageDataに変換し、正しいと別のキャンバスにこれを入れ、最後にctx.drawImageと元のコンテキストにそのキャンバスを描くことができるように作成、別の画像データアレイ上に。

私はあなたが適用する数学の種類を知っていると仮定するつもりだし、そうでない場合、私はあなたが斜行し、スケーリングに見て、あなたは2を組み合わせることができます方法を見つける示唆しています。 https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D#Pixel_manipulation

出典

2017-02-12 00:46:08 towc

JavaScriptのキャンバスは、私は次のような問題を持っているテキスト

答えて

関連する問題