当缩放一个 < 画布 > 时禁用插值
注意 : 这与如何呈现 现有的画布元素在放大时呈现，没有和如何呈现 放在帆布表面上的线条或图形有关。换句话说，这与 比例元素的 插值有关，而与画布上绘制的图形的 反锯齿无关。我关心的不是浏览器如何绘制线条，而是浏览器在放大时如何呈现画布元素 本身。
是否有一个画布属性或浏览器设置，我可以通过编程来禁用插值时缩放 <canvas>元素？跨浏览器的解决方案是理想的，但并非必不可少; 基于 Webkit 的浏览器是我的主要目标。表现很重要。
这个问题 非常相似，但是没有充分说明这个问题。不管怎样，我试过 image-rendering: -webkit-optimize-contrast但没有用。
该应用程序将是一个“复古”8位风格的游戏写在 HTML5 + JS，使它清楚我需要什么。
为了说明这一点，这里有一个例子
假设我有一张21x21的画布。
<canvas id='b' width='21' height='21'></canvas>
... 它的 css 使得元素变大了5倍(105x105) :
canvas { border: 5px solid #ddd; }
canvas#b { width: 105px; height: 105px; } /* 5 * 21 = 105 */
我在画布上画了一个简单的“ X”，像这样:
$('canvas').each(function () {
var ctx = this.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(21,21);
ctx.moveTo(0,21);
ctx.lineTo(21,0);
ctx.stroke();
});
左边的图像是 Chromium (14.0)呈现的。右边的图片是我想要的(为了说明目的手绘)。
最佳答案