画布中的矩形具有柔软的边缘

Question

我有一个黄色的画布，里面画了一个红色的矩形。 但是，我注意到一个有趣的效果 - 边框上的矩形的两边有非常明确的边缘，而黄色画布内部的矩形的两边是＆＃34;软化＆＃34;或＆＃34;模糊＆＃34;。

这就是我现在拥有的：

我的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 的

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

Answer 1

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

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

这是demo

或来自javascript：

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

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

Answer 2

你的CSS是拉伸你的画布，而不是定义它的大小导致它模糊。像在anelkkhatri中那样在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);

Answer 3

可能它从某种尺寸缩放。 更新：它从默认的300x150 (canvas on mdn)

缩放

尝试直接在canvas元素上设置width height。

<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/

Answer 4

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

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

Answer 5

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