我有一个精灵,使用sprite sheet动画.他只有16×16,但是我想把他放大到64×64左右,它的像素都是好的！
alt text http://i30.tinypic.com/2nu243.jpg
结果是可怕的,当然浏览器是反锯齿的. ：/
谢谢！
解决方法
如果有人再次绊倒(像我一样),Webkit支持图像渲染的-webkit优化对比度值,(当前)是最近邻近放大的实现.它可以应用于图像和画布.
这是一个例子.
.nn128 {
width: 128px;
height: 128px;
image-rendering: -moz-crisp-edges;
image-rendering: -webkit-optimize-contrast;
}
<canvas class="nn128" width="16" height="16"></canvas>
<img src="path/to/small/image.png" alt="Small image" class="nn128">
通过此设置,WebkitSafari和Gecko / Firefox将使用最近邻的算法将16×16画布空间和小图像放大到128×128.
更新答案最初表示Webkit浏览器支持这一点;事实上,截至2011-12-24,它适用于Mac OS上的Safari和Mac OS上的Chrome,但不适用于Chrome 1 Windows(Windows上的Safari未经验证),如Issue 106662 of the Chromium bug tracker所述.接受CSS样式表中的-webkit-optimize-contrast值,但不会有任何影响.我的期望是有一天会有效,而这种方法将是获得最近邻居升级的正确方法,但是现在使用这种方法意味着Windows Chrome用户将不得不忍受模糊.