有经典的模糊问题，但没有找到有效的解决方案答案

【问题标题】：Having the classic blur issue but not finding a working solution有经典的模糊问题，但没有找到有效的解决方案
【发布时间】：2017-07-30 05:51:59
【问题描述】：

所以我们都知道用略微模糊的笔划绘制形状的问题。当使用普通的 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：我需要画布始终具有相同的宽度和高度 (200 * 200)，但同时始终填满屏幕。我通过始终将 canvas.width/height 设置为 200 并将 canvas 的 css 设置为 100% 来实现这一点。

【问题讨论】：

如果你用 CSS 缩放你的画布，你将无法避免模糊，因为在大多数情况下你是在拉伸元素，并且画布抗锯齿是由浏览器执行的。

标签： javascript html5-canvas createjs easeljs

【解决方案1】：

简单的回答：你不能。

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

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

您仍然可以使用该画布作为模型，而不是视图；)

如果我不想在可变空间上对固定大小的画布进行抗锯齿处理，我会创建另一个画布，其大小不取决于 css，而是取决于 js 事件（查看 window resize event listener 和 window.innerWidth, window.innerHeight )，然后在其上绘制“模型”原始画布，同时禁用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 );

【讨论】：