Question

我正在使用EaselJS在Canvas中创建动画背景。我想知道为什么一旦我将画布设置为窗口的大小，我的精灵就会被缩放... 图像看起来像拉伸......

$（ '主体'）附加（ ''）。 $（ '＃backgroundCanvas'）的高度（$（窗口）.height（））; $（ '＃backgroundCanvas'）宽度（$（窗口）.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);

Answer 1

使用CSS缩放画布时，它会缩放内容，因为它的像素数相同。使用JavaScript进行缩放（设置宽度和高度属性），它会更改像素数量，并且不会拉伸内容。

干杯。

Answer 2

重要的是要知道画布对象从html attr宽度和高度获得宽度和高度，改变css的宽度和高度只会缩放画布对象

所以你有2个解决方案：使用这个HTML

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

或将您的代码更改为：

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

现在我可以告诉你欢呼;）

为什么画架会缩放我的精灵？

2 个答案: