0

ここで何が間違っていますか??

html5 イメージ タグを使用して canvs にイメージを書き込んでいます。新しい画像のonclickで最後の画像を置き換えたい..画像をロードすることはできますが、次の画像をクリックすると、最後にロードされた画像と重なります..コードは次のとおりです.. clearRect( ） 関数

           function drawImage(imageObj){

            var stage = new Kinetic.Stage("container", 578, 500);
            var layer = new Kinetic.Layer();
            var x = stage.width / 2 - 200 / 2;
            var y = stage.height / 2 - 137 / 2;
            var width = 200;
            var height = 137;

            // darth vader
            var darthVaderImg = new Kinetic.Shape(function(){
                var context = this.getContext();

                context.clearRect(x,y,width,height);
                context.drawImage(imageObj, x, y, width, height);
                // draw invisible detectable path for image
                context.beginPath();
                context.rect(x, y, width, height);
                context.closePath(); 


          });
4

2 に答える 2

1

この投稿を確認してください。

canvas.width = canvas.width;

キャンバスをクリアする必要があります。

于 2012-02-24T12:35:29.963 に答える
0

私が作成したこの関数を使用してください

このように呼ぶ -clearCanvasGrid(/id of the canvas/)

function clearCanvasGrid(canvasname){
            var canvas = document.getElementById(canvasname); //because we are looping //each location has its own canvas ID
            var context = canvas.getContext('2d');
            //context.beginPath();

            // Store the current transformation matrix
            context.save();

            // Use the identity matrix while clearing the canvas
            context.setTransform(1, 0, 0, 1, 0, 0);
            context.clearRect(0, 0, canvas.width, canvas.height);

            // Restore the transform
            context.restore(); //CLEARS THE SPECIFIC CANVAS COMPLETELY FOR NEW DRAWING

        }
于 2012-11-18T09:25:29.860 に答える