javascript - 遇到经典的模糊问题但没有找到可行的解决方案

Question

所以我们都知道用稍微模糊的笔画绘制形状的问题。当使用纯js和canvas通过以下方法时，我能够修复它，没有进一步的问题:

context.sRect=function(x,y,w,h){
x=parseInt(x)+0.50;
  y=parseInt(y)+0.50;  
  this.strokeRect(x,y,w,h);
}
context.fRect=function(x,y,w,h){
  x=parseInt(x);
  y=parseInt(y);
  context.fillRect(x,y,w,h);
}

但是，当使用easeljs stage时，这些方法根本没有任何影响，并且形状仍然模糊。我还尝试在使用drawRect()时将x和y以及宽度和高度偏移-.5；那也没用。我尝试的最后一件事是将 stage.regX 和 stage.regY 设置为 -.5，这确实改变了输出，但只是改变了模糊(稍微更模糊)。 我错过了什么吗？

PS:我需要 Canvas 始终具有相同的宽度和高度(200 * 200)，但同时始终填充屏幕。我通过始终将 canvas.width/height 设置为 200 并将 canvas 的 css 设置为 100% 来实现此目的。

Answer 1

简单的答案:你不能。

当您使用 CSS 缩放 Canvas 时，您可以将其视为单独缩放 Canvas 上的每个像素。因此，您将需要抵消浏览器本身的抗锯齿功能。

为了准确地抵消光栅图形中的抗锯齿效果，您总是需要比容器更多的空间，这仅仅是因为像素信息的量化。如果您确实希望 Canvas 保存固定数量的信息(200x200 像素)，这是不可能的。

您仍然可以做的是使用该 Canvas 作为模型，而不是 View ;)

如果我不想在可变空间上对固定大小的 Canvas 进行抗锯齿，我会创建另一个 Canvas ，其大小不依赖于 css，而是依赖于 js 事件(查看 window resize 事件监听器 和 window.innerWidth, window.innerHeight)，然后在其上绘制“模型”原始 Canvas ，同时禁用 ctx.imageSmoothingEnabled (= false)，这样您就可以获得所需的结果。

这是一个最小的示例:

var canvasModel = document.createElement( 'canvas' ), // your current canvas
    canvas = document.getElementById( 'view-canvas' ), // displaying on the screen
    ctxModel = canvasModel.getContext( '2d' ),
    ctx = canvas.getContext( '2d' );

ctx.imageSmoothingEnabled = false;

// all of your stuff that you're currently doing goes here
...

// every time you update the 200x200 canvas, you do this:
ctx.drawImage( canvasModel, 0, 0, w, h );