5

たくさんの画像を非表示のimg要素にロードし、次に各画像をキャンバスに配置するJavascriptループをロードするコードがあります。ただし、キャンバスに配置したときに円になるように各画像をクリップしたいと思います。

私のループは次のようになります。

    $$('#avatars img').each(function(avatar) {
        var canvas = $('canvas');
        var context = canvas.getContext('2d');

        var x = Math.floor(Math.random() * canvas.width);
        var y = Math.floor(Math.random() * canvas.height);

        context.beginPath();
        context.arc(x+24, y+24, 20, 0, Math.PI * 2, 1);
        context.clip();

        context.strokeStyle = "black";

        context.drawImage(document.getElementById(avatar.id), x, y);

        context.stroke();
    });

問題は、最初の画像だけが描画される（または表示される）ことです。

クリッピングロジックを削除した場合：

    $$('#avatars img').each(function(avatar) {
        var canvas = $('canvas');
        var context = canvas.getContext('2d');

        var x = Math.floor(Math.random() * canvas.width);
        var y = Math.floor(Math.random() * canvas.height);

        context.drawImage(document.getElementById(avatar.id), x, y);
    });

次に、すべての画像が描画されます。

各画像を個別にクリップする方法はありますか？

クリッピング領域を画像間のキャンバス全体になるようにリセットしようとしましたが、うまくいきませんでした。

4

1 に答える 1

10

現在のコンテキスト状態を保存してから復元してください。

        canvas = document.getElementById("area");
        context = canvas.getContext('2d');

        $("#avatars img").each(function(avatar) {

            var x = Math.floor(Math.random() * canvas.width);
            var y = Math.floor(Math.random() * canvas.height);

            context.save();//push current state into canvas
            context.beginPath();
            context.arc(x + 24, y + 24, 20, 0, Math.PI * 2, 1);
            context.clip();

            context.strokeStyle = "black";

            //draw image this way
            var img = new Image();
            img.src = avatar.src;
            img.onload = function() {
                context.drawImage(img, x, y);
            };

            context.stroke();
            context.restore();//restore context to the state

        });

drawImage メソッドを呼び出すときは、すでにavatar.src パラメータにあるソース行を追加して、イメージ パラメータを Image クラスとして設定する必要があると思います。

Canvas Stateの参照ドキュメントを確認する必要があります

于 2010-03-31T11:19:30.953 に答える