遇到经典的模糊问题但找不到有效的解决方案

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 上的每个像素。因此，您将需要抵消浏览器本身的抗锯齿功能。

要准确抵消光栅图形中的抗锯齿，您总是需要比容器更多的 space，这仅仅是因为以像素为单位的信息量化。如果您确实希望 canvas 保存固定数量的信息（200x200 像素），这是不可能的。

您仍然可以使用 canvas 作为模型，而不是视图 ;)

如果我不想在变量 space 上对固定大小的 canvas 进行抗锯齿处理，我会创建另一个 canvas，其大小不依赖于 css，但在 js 事件上（查看 window resize event listener 和 window.innerWidth, window.innerHeight），然后在其上绘制 "model" 原始 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 );

遇到经典的模糊问题但找不到有效的解决方案

Having the classic blur issue but not finding a working solution

javascript

html5-canvas

createjs

easeljs