我有一个使用精灵表格进行动画制作的精灵。他只有16x16,但我想将其像素级的像素提高到64x64左右!
结果是可怕的,当然浏览器反锯齿了。 :/
谢谢!
编辑:
不需要CSS,这是我的绘图功能。
function drawSprite(offsetx:number,offsety:number,posx:number,posy:number){
ctx.drawImage(img, offsetx*32, offsety*32, 32, 16, posx*32, posy*8, 128, 32);
}
看到它有点工作here (codepen)
最佳答案
万一有人像我一样再次偶然发现这个问题,Webkit支持-webkit-optimize-contrast
的image-rendering
值(当前)是最近邻居升级的实现。它可以应用于图像和 Canvas 。
这是一个例子。
.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都将使用最近的邻居算法将16x16 Canvas 空间和小图像扩大到128x128。
UPDATE 答案最初是Webkit浏览器支持的。实际上,截至2011年12月24日,它可以在Mac OS上使用Safari,在Mac OS上使用Chrome,但不能在Chrome上使用一个Windows(未经验证的Windows Safari),如Issue 106662 of the Chromium bug tracker所述。词汇上,Windows上的Chrome会在CSS样式表中接受
-webkit-optimize-contrast
值,但不会产生任何效果。我希望它有一天会起作用,并且此方法将是获得最近邻居升级的正确方法,但是就目前而言,使用此方法意味着Windows Chrome用户将不得不忍受模糊性。