像素风图案缩放后变模糊（被消除锯齿）的解决办法
Posted 雷乌斯
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了像素风图案缩放后变模糊（被消除锯齿）的解决办法相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test Page</title>
<style>
img
image-rendering: optimizeSpeed;
image-rendering: -moz-crisp-edges; /* Firefox */
image-rendering: -o-crisp-edges; /* Opera */
image-rendering: -webkit-optimize-contrast; /* Webkit (non-standard naming) */
image-rendering: pixelated;
-ms-interpolation-mode: nearest-neighbor; /* IE (non-standard property) */
</style>
</head>
<body>
<img src="assets/images/test.png" width="264" height="232" />
</body>
</html>
美术的基友告诉我，他是用的photoshop设置里面的图像插值：【
在html中，我找到了类似的玩意：
image-rendering
这个属性是用来告诉浏览器用什么算法来处理图片的缩放
赋值可以是auto、pixelated以及crisp-edges。
auto就不说了，
pixelated（像素化）顾名思义就是设计提供给像素化图片缩放使用的。其实只能放，并不能缩，使用pixelated使用nearest-neighbor（近邻取样）
crisp-edgespixelated
这些算法是在保证不模糊的前提下，重新“脑补”一张图出来，、
每种算法具体可以去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函数里重新做一次处理
以上是关于像素风图案缩放后变模糊（被消除锯齿）的解决办法的主要内容，如果未能解决你的问题，请参考以下文章