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

Question

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

这就是我现在拥有的:

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

这是演示

或者来自javascript:

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

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