Canvas中的最近邻渲染

Question

我有一个使用精灵表动画的精灵.他只有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);
}

看到它在这里工作(codepen)

Answer 1

如果有人再次偶然发现(像我一样),Webkit支持一个-webkit-optimize-contrast值image-rendering,它(当前)是最近邻扩展的实现.它可以应用于图像和画布.

这是一个如何运作的例子.

.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">

通过此设置,Webkit Safari和Gecko/Firefox将使用最近邻居算法将16x16画布空间和小图像放大到128x128.

更新答案最初表明Webkit浏览器支持这一点; 事实上,截至2011-12-24,它适用于Mac OS上的Safari和Mac OS上的Chrome,但不适用于Chrome one Windows(Windows上的Safari未经验证),如Chromium bug追踪器的问题106662所述.从词汇上讲,Windows上的Chrome将接受-webkit-optimize-contrastCSS样式表中的值,但它不会产生任何影响.我希望它能在某一天工作,这种方法将是获得最近邻居升级的正确方法,但是现在,使用这种方法意味着Windows Chrome用户将不得不忍受模糊.