0

私は、漫画のチャウダー（リンクの例）で見られるのと同様の効果を達成しようとしています。ここでは、形状が、静止したままのテクスチャの下のマスキングレイヤーとして機能します。キャンバスをクリアして状態を保存し、長方形のクリッピング領域を描画してから、キャンバスの幅と高さ全体を占める背景テクスチャを描画するレンダリングループを作成することで、このアイデアを試し始めました。

描画関数は次のとおりです。

function draw() 
{
    context.clearRect(0,0, 640, 480);
    context.save();
    x += velocityX;
    y += velocityY;
    context.rect(x, y, 40, 40);
    context.clip();
    context.drawImage(image, 0,0, 640, 480);
    context.restore();
}

基本的には、毎秒60フレームで実行され、長方形の位置を更新し、クリッピング領域内の背景画像をクリッピングします。（コードが完全に構造化されていないことは知っていますが、この効果がキャンバスでも可能かどうかを確認するために実験を行っていました）。

http://jsfiddle.net/JERje/86/

私が抱えていると思われる問題は、ループの前の反復からのクリッピング領域がぶら下がって、上のフィドルに見られる奇妙な効果を作成していることです。draw()ループのステップですべてを並べ替えようとしましたが、機能しているように見えるのはcanvas.width = canvas.width、画面をクリアするためのトリックだけです。IEでは機能しないようで、キャンバスも破壊されるため、この画面をクリアする方法は避けたいと思いますstate。clearRect()画面をクリアするために動作するはずです。私は何が間違っているのですか？

4

2 に答える 2

1

あなたは同じHTML5Canvasペーパーバックを使用しています。私はあなたではありません。

jsfiddleで行ったように、アドホックキャンバスを次のように設定した場合：

var newCanvas = document.createElement('canvas');
newCanvas.getContext("2d").drawImage(image,0,0);

このような関数は、そのキャンバスからセクションをハックすることができます。

context.putImageData(newCanvas.getContext("2d").getImageData(x,y,40,40),x,y);

したがって、チャウダー効果が得られます。良いショーマン、頑張ってください。それが機能しない場合は私をPst

編集：ただし、このソリューションは一部のコンテキストスケーリング変換を無視します。自分でスケールを処理する方法については賢くしてください（真の「チャウダー」効果が必要な場合は、とにかくそうする必要があります）

于 2013-02-23T11:31:42.740 に答える
1

ですから、これについてはかなり馬鹿げていると感じますが、どうやら電話をかけるときは、クリッピング領域を閉じるために後でrect()必ず電話をかける必要があります。closePathついに理解できてうれしいです。次に、複数のレイヤーを追加します。

これが実用的なフィドルです：http：//jsfiddle.net/JERje/129/

于 2013-03-05T17:24:16.900 に答える