为什么easelJS会对我的精灵进行缩放处理？

Question

我正在使用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);

- manomoul

---

你能发布你的代码或者问题链接吗？ - olsn

你的原始画布是否与窗口成比例？ - markE

Answer 1

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

干杯。

- Lanny

---

jQuery的width()和height()方法将使用CSS来设置大小，而不是JavaScript。您需要直接针对画布进行操作，并使用JavaScript来设置宽度/高度。@fareed在此线程中发布了使用jQuery的解决方案。 - Lanny

Answer 2

重要提示：canvas对象的宽度和高度是从html属性width和height中获取的，更改CSS的宽度和高度只会缩放canvas对象。

因此您有两个解决方案： 使用以下HTML：

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

或者将您的代码更改为：

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

现在我可以告诉你，干杯 ;)

- Fareed Alnamrouti