如何HTML5画布图像缩放问题？
如何HTML5画布图像缩放问题？
提问于 2018-04-04 01:59:46
我试图在HTML5画布中制作像素艺术为主题的游戏，并且我将10x20左右大小的图像作为其中的一部分，并使用以下代码将它们绘制到画布上：
ctx.drawImage(image, 20, 20, 100, 200);
然而，画布使用双立方图像缩放，因此像素艺术图像在2x和更高处看起来很糟糕。有没有办法强制画布使用最近缩放或可能使用自定义方法来缩放图像？如果不是这意味着图像必须事先缩放到像Paint.net这样的东西吗？
Stack Overflow用户
发布于 2018-04-04 11:42:21
通过JavaScript：
ctx.imageSmoothingEnabled = false;
在Gecko上，需要
ctx.mozImageSmoothingEnabled = false;
在Webkit上，需要
ctx.webkitImageSmoothingEnabled = false;
我无法在其他浏览器上找到有关此属性支持的信息，因此他们可能不支持它。
通过CSS：
另一种选择是在画布上使用一组CSS规则。例如：
<canvas id="c" width="16" height="16"></canvas>
<script>
var c = document.getElementById("c"),
cx = c.getContext("2d"),
im = new Image();
im.src = "http://stackoverflow.com/favicon.ico"; // 16x16
cx.drawImage(im, 0, 0);
</script>
<style>
canvas {
width: 32px;
height: 32px;
image-rendering: optimizeSpeed;
image-rendering: crisp-edges;
image-rendering: -moz-crisp-edges;
image-rendering: -o-crisp-edges;
image-rendering: -webkit-optimize-contrast;
-ms-interpolation-mode: nearest-neighbor;
}
</style>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/-100003254
复制相关文章
相似问题