画布中的矩形有软边答案

【问题标题】：Rectangle In A Canvas Has Soft Edges画布中的矩形有软边
【发布时间】：2014-05-21 17:36:11
【问题描述】：

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

这就是我现在拥有的：

我的 HTML：

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

Javascript：

var canvas=document.getElementById("myCanvas");
var ctx=canvas.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);

CSS：

#myCanvas {
    background-color:#FFFF00;
    width:1000px;
    height:600px;
    border: none;
    margin-left:auto;
    margin-right:auto;
}

JSFIDDLE

为什么会这样？我怎样才能使矩形的所有四个边都非常精确和定义？谢谢。

【问题讨论】：

删除所有 CSS 会使模糊消失，但仍然对为什么它首先被模糊感到困惑。祝你好运！
抗锯齿，可能吗？见stackoverflow.com/questions/195262/…。

标签： javascript html css canvas

【解决方案1】：

你应该像这样设置画布大小：

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

这是demo

或来自javascript：

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

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

【讨论】：

有道理，看到 css 中的宽度似乎正在拉伸正在用 javascript 填充的框，使模糊像素化
如果它明确了为什么画布有弹性，请将其标记为答案！ :D
这也说明了矩形的尺寸过大。谢谢！ :)

【解决方案2】：

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

http://jsfiddle.net/S6vmh/5/

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

【讨论】：

感谢您的帮助！

【解决方案3】：

它可能是从某个大小缩放的。更新：从默认的 300x150 (canvas on mdn)987654321@

缩放

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

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

不要用 CSS 调整它的大小

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

http://jsfiddle.net/T3yU2/

【讨论】：

谢谢！这就是为什么矩形如此之大又如此模糊的原因:)

【解决方案4】：

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

【讨论】：

【解决方案5】：

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

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

【讨论】：