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

最新推荐文章于 2024-09-02 02:43:46 发布

雷乌斯

最新推荐文章于 2024-09-02 02:43:46 发布

阅读量1.1w

点赞数 4

分类专栏： html5 html/js

本文链接：https://blog.csdn.net/yyf1990cs/article/details/51145745

版权

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

摘要由CSDN通过智能技术生成

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