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);
}

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

PS：我需要画布始终具有相同的宽度和高度（200 * 200），但同时总是填满屏幕。我通过将canvas.width / height设置为200并将canvas的css设置为100％来实现此目的。

Answer 1

简单回答：你不能。

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

要准确地抵消光栅图形中的抗锯齿，您总是需要比容器更多的空间，这仅仅是因为像素的信息量化。如果您确实希望画布保存固定数量的信息（200x200像素），则无法进行此操作。

您仍然可以使用该画布作为模型，但不使用视图;）

如果我不希望在可变空间上对固定大小的画布进行抗锯齿处理，我会创建另一个画布，其大小不依赖于css，但是依赖于js事件（查看{{1 }和window resize event listener），然后绘制＆＃34;模型＆＃34;禁用window.innerWidth, window.innerHeight（ctx.imageSmoothingEnabled）时会在其上显示原始画布，以便您获得所需的结果。

这是一个最小的例子：

= false

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

1 个答案: