Javascript 画布中的矩形具有软边

我有一张黄色的画布，里面画了一个红色的长方形。 但是，我注意到一个有趣的效果——边框上的矩形的两侧有非常明确的边，而黄色画布内的矩形的两侧是“软化”或“模糊”的

这就是我现在拥有的：

我的HTML：

<canvas id="myCanvas"> 
</canvas>

CSS:

---

为什么会发生这种情况？我怎样才能使矩形的四条边都非常精确和明确呢？谢谢。

您应该这样设置画布大小：

<canvas id="myCanvas" width="1000" height="600"></canvas>

---

从CSS设置大小只是缩放画布，这不是你想要的

您的CSS正在拉伸画布，而不是定义画布的大小，从而导致画布模糊。像aneelkkhatri那样在HTML中定义画布大小，也可以在Javascript中定义画布大小，请参见下面的JSFIDLE

---

可能它是从某种尺寸缩放而来的更新：从默认值300x150缩放

尝试直接在画布元素上设置宽度和高度

<canvas id="myCanvas" width="400" height="200"></canvas>

---

还要确保不要在CSS中设置画布不透明度，在我的例子中，这会导致模糊。在fillStyle上移动到RGBA修复了它

对于在动态调整画布大小时出现此问题的任何人，请尝试将imageSmoothing参数更改为false

context = canvas.getContext("2d");
context.imageSmoothingEnabled = false;

---

删除所有CSS会使模糊消失，但仍不清楚为什么它会首先模糊。祝你好运反走样，可能吗？请看。有道理，看看css中的宽度似乎是如何拉伸用javascript填充的框的，如果它清楚地说明了画布为什么是拉伸的，则使模糊像素标记为答案！：这也解释了矩形过大的原因。谢谢！：）非常感谢。这就是为什么矩形如此大而模糊：）谢谢你的帮助！

var canvas = document.getElementById("myCanvas");
canvas.width  = 1000;
canvas.height =  600;

var canvas=document.getElementById("myCanvas");
canvas.width  = 1000;
canvas.height = 600;

var ctx=canvas.getContext("2d");
ctx.wdith=1000;
ctx.fillStyle="#FF0000";
ctx.fillRect(1,1,150,75);

<canvas id="myCanvas" width="400" height="200"></canvas>

#myCanvas {
  background-color:#FFFF00;
  border: none;
  margin-left:auto;
  margin-right:auto;
}

context = canvas.getContext("2d");
context.imageSmoothingEnabled = false;