如何使这个画布矩形像css div一样锐利

我的笔：

橙色css div具有相同的橙色背景和相同的黑色边框，看起来锐利而干净

画布中绘制的橙色矩形看起来模糊/扭曲

为什么会有区别？我没有使用css样式设置画布的高度/宽度，这是一种

我听说初学者失败；-）

如何使画布看起来像css一样清晰

<canvas id="mycanvas" height="200" width="400"></canvas>
<div></div>

div{
  border:black 2px solid;
  height:198px;
  width:50px;
  background:orange;
  display:inline-block;
}

canvas {   
    background: red;
}

$(document).ready(function() {

  var canvas = document.getElementById("mycanvas");
  var context = canvas.getContext("2d");
  context.save(); 
  context.lineWidth = 1;

  context.fillStyle = "orange";
  context.fillRect(348, 1, 50, 198);

  context.strokeStyle = "black";
  context.strokeRect(348, 1, 50, 198);

  context.fill();    
  context.restore();

});

div{
边框：黑色2px实心；
高度：198px；
宽度：50px；
背景：橙色；
显示：内联块；
}
画布{
背景：红色；
}
$（文档）.ready（函数（）{
var canvas=document.getElementById（“mycanvas”）；
var context=canvas.getContext（“2d”）；
context.save（）；
context.lineWidth=1；
context.fillStyle=“橙色”；
fillRect（348,1,50,198）；
context.strokeStyle=“黑色”；
strokeRect（348,1,50,198）；
context.fill（）；
restore（）；
});

您只需稍微调整一下线宽即可：

$(document).ready(function() {

  var canvas = document.getElementById("mycanvas");
  var context = canvas.getContext("2d");
  context.save(); 
  context.lineWidth = 2;

  context.fillStyle = "orange";
  context.fillRect(350, 1, 50, 198);


  context.strokeStyle = "black";
  context.strokeRect(349, 1, 50, 198);

  context.fill();    
  context.restore();

});

---

看起来笔划以画布边缘为中心，而不是位于内部或外部，并且最小宽度设置为两像素。通过将笔划设置为2-

context.lineWidth=2-线条变得更清晰。也许你可以将笔划移到画布外或插入画布中

正如Ken提到的…
我将矩形移动了一点，它们在我看来是一样的。我有一些需求，我不能仅仅因为canvas api愚蠢或不起作用而改变它们。它必须看起来很锐利，只有一个像素的边框。2像素看起来太胖了。我的笔划没有像你说的那样设置为2。我的笔划又名线宽为1，请参见上面的代码。