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

最新推荐文章于 2025-11-28 00:32:40 发布

原创

最新推荐文章于 2025-11-28 00:32:40 发布 · 1.2w 阅读

7 ·

CC 4.0 BY-SA版权

本文探讨了像素风图案在缩放后出现模糊现象的问题，提到了使用`image-rendering` CSS属性来避免锯齿，但指出在createjs中直接设置该属性无效。解决方案是将canvas的所有平滑处理设为false，并在resize函数中重新处理以保持效果。

<!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>