2017-06-08 11 views
0

1つのイメージに複数のフレームがあります。どのようにキャンバス内に画像の切り抜きをペイントするのですか?キャンバス内でイメージ(フレーム)を切り抜く方法

パーティープーパーは、キャンバスが拡張され、CSSを介して反応するということです。例:

言って、すべてのフレームは100x100pxであると私は "5" のフレームをペイントします。だから私は、位置、次のフレームをペイントする必要があります:X100、Y200、width100、高さを100

私のコードは次のようになります。

this.ctx = this.canvas.get(0).getContext("2d"); 
this.ctx.drawImage(this.image, - this.imageWidth * x, - this.imageHeight * y, this.image.width, this.image.height); 

すべての値が私のコンソールで正しい出てくるが、結果はジャックたわごとです。 drawImageが間違っていると解釈しましたか?

+0

はこれを行いますキャンバスにする必要がありますか?私は理由がない、あなたは描いていない。なぜCSS3スプライトを使用しないのですか?彼らはこれのために作られました。 – Rafael

+0

2つの理由:この関数はスクロールに縛られており、スプライトのサイズを変更できません。反応容器内に適切に配置する。 – user980018

+0

あなたは確かに応答可能なコンテナのサイズに対して 'backgroundPosition'を操作することで、CSSスプライトを使用することができます。 – Rafael

答えて

0

なぜ負の値を使用していますか?

this.ctx.drawImage(this.image, 100, 100); 

をしたり、スプライトがない適切なサイズがある場合: "5" のための

、あなたが使用する必要があるのdrawImageのため

this.ctx.drawImage(this.image, 100, 100, 100, 100); 

ドキュメントを: https://developer.mozilla.org/en/docs/Web/API/CanvasRenderingContext2D/drawImage

関連する問題