javascript - Canvas 中的矩形具有柔和的边缘

Question

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

这是我现在拥有的:

我的 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 大小:

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

这是 demo

或来自javascript:

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

通过 CSS 设置大小只会缩放 Canvas ，这不是您想要的!