像素风图案缩放后变模糊（被消除锯齿）的解决办法

美术的基友告诉我，他是用的photoshop设置里面的图像插值：【临近（保留硬边缘）】来保证缩放后仍然保持像素风格。

在html中，我找到了类似的玩意：

image-rendering

这个属性是用来告诉浏览器用什么算法来处理图片的缩放

赋值可以是auto、pixelated以及crisp-edges。

auto就不说了，

pixelated（像素化）顾名思义就是设计提供给像素化图片缩放使用的。其实只能放，并不能缩，使用pixelated的时候缩小时仍然是用的auto模式，因为它的原理只是简单的把1个像素扩大到4个像素，并没有计算的过程。它可以保证像素图片在放大后仍然保持原样的像素。这就是我们需要的属性了，IE下则需要使用使用nearest-neighbor（近邻取样）。

crisp-edges（硬边缘）可以防止图片在缩放的过程中模糊化，区别于pixelated，他可以使用很多不同的算法来保证图片缩放的质量，如2xSaI，HQnX，EPX等。由于不是所有浏览器都支持pixlated，所以这条属性也要用上。因为我用到的图片都是非常简单的像素画，有大量的纯色块，所以也能够做到完全不失真，而复杂的图案，我借用一张NDS吧的图

这些算法是在保证不模糊的前提下，重新“脑补”一张图出来，、

每种算法具体可以去WIKI上查看。

------------------------------------------createjs的分割线--------------------------------------------------------------------

虽然上面写了那么多，然而我发现在createjs中使用的时候给canvas设置这些css并没有卵用。

而是要像下面这样

    canvas = document.getElementById('gameCanvas');

    var context = canvas.getContext("2d");
    context.mozImageSmoothingEnabled = false;
    context.webkitImageSmoothingEnabled = false;
    context.msImageSmoothingEnabled = false;
    context.imageSmoothingEnabled = false;
    context.oImageSmoothingEnabled = false;

把所有的平滑处理都设为false，就好了。

*这些属性在缩放过后会失效，不要忘记resize函数里重新做一次处理