3

EaselJS を使用して Canvas でアニメーションの背景を作成しています。キャンバスをウィンドウのサイズに設定するとすぐにスプライトがスケーリングされるのはなぜだろうと思っています...画像が伸びているように見えます...

$('body').append(''); $('#backgroundCanvas').height($(window).height()); $('#backgroundCanvas').width($(window).width());

var sprite = new createjs.SpriteSheet({
          "animations":
            {
                "run": [0, 6, "run", frequency]},
                "images": [url],
                "frames":
                    {
                        "height": height,
                        "width":width,
                        "regX": 0,
                        "regY": 0,
                        "count": count
                    }
            });
                    var item = new createjs.BitmapAnimation(sprite);    
                    item.height = height;       
                    item.width = width;             
                    //item.scale = item.scaleY = item.scaleX= 0.5;  
                    item.x = positionX;         
                    item.y = positionY;
                    item.dirX = 1;  
                    item.dirY = 1;      
                    item.vX = 4;            
                    item.vY = 4;


                    item.gotoAndPlay("run");

                    stage.addChild(item);
4

2 に答える 2

3

CSS でキャンバスをスケーリングすると、同じピクセル数であるため、内容がスケーリングされます。JavaScript で拡大縮小 (幅と高さのプロパティを設定) すると、ピクセル数が変更され、コンテンツは引き伸ばされません。

乾杯。

于 2013-03-23T00:08:28.810 に答える
2

キャンバス オブジェクトは html 属性の幅と高さから幅と高さを取得することを知っておくことが重要です。css の幅と高さを変更すると、キャンバス オブジェクトのみがスケーリングされます。

したがって、2つの解決策があります：このhtmlを使用してください

<canvas id="backgroundCanvas" width="968" height="358"></canvas>

またはコードを次のように変更します。

$('#backgroundCanvas').attr("height",$(window).height());
$('#backgroundCanvas').attr("width",$(window).width());

今、私はあなたに乾杯を伝えることができます;）

于 2013-12-29T11:47:07.200 に答える