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

Question

我的笔：http ://codepen.io/anon/pen/mBliE

具有相同橙色背景和相同黑色边框的橙色 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();

});

Answer 1

看起来笔触以画布边缘为中心，而不是位于内部或外部，并且最小宽度设置为 2 px。通过将笔画设置为两个 -context.lineWidth = 2;线条变得更清晰。也许你可以以某种方式将笔画移到画布外或插入画布......

正如肯所说...

Answer 2

你可以用你的线宽玩一点：

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

});

代码笔