在缩放
12 浏览
在缩放
注意：这与缩放时现有画布元素的渲染方式有关，与线条或图形绘制到画布表面的渲染方式无关。换句话说，这完全与缩放元素的插值有关，与在画布上绘制的图形的抗锯齿无关。我关心的不是浏览器如何绘制线条；我关心的是浏览器在放大画布元素本身时如何渲染它。
有没有可以以编程方式更改的画布属性或浏览器设置，以禁用缩放
这个问题最相似但不足以说明问题。值得一提的是，我尝试了image-rendering: -webkit-optimize-contrast，但没有效果。
应用程序将是一个用HTML5+JS编写的“复古”8位风格游戏，以清楚地表达我所需要的。
为了说明，这里有一个例子。（实时版本）
假设我有一个21x21的画布...
...它的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）的渲染结果。右边的图像是我想要的（手绘用于说明目的）。
图片1 图片2