Question

我让this plnkr来证明我的问题。我不明白为什么绘制的线看起来更厚＆＃39;或者＆＃39;胖子＆＃39;当它以一定角度绘制而不是直接跨越页面时。

如何以一致的线宽绘制此形状？

HTML：

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <canvas id="canvas"></canvas>
  </body>
  <script src="script.js"></script>
</html>

的CSS：

#canvas {
  width: 100%;
  height: 80px;
  border: 1px solid black;
}

js（请注意，在绘制开始之前，线宽仅设置为＆＃39; 5＆＃39;。）：

(function () {
    var canvas = document.getElementById('canvas');
    if (!canvas.getContext) {
        // browser does not support HTML canvas
        return;
    }
    var ctx = canvas.getContext("2d");
    ctx.strokeStyle = "#000000";
    ctx.lineWidth = 5;
    ctx.beginPath();
    ctx.lineTo(0, canvas.height - 10);
    var twoThirds= (canvas.width / 3) * 2;
    var oneSixth= (canvas.width / 6);
    ctx.lineTo(twoThirds, canvas.height - 10);
    ctx.lineTo(twoThirds + oneSixth, 5);
    ctx.lineTo(canvas.width-3, canvas.height - 10);
    ctx.stroke();
})();

Answer 1

由于你的尺寸如何，你的画布没有正方形的“像素”。

你不能看到扁平线，但对角线显示它。

HTML canvas元素具有您需要设置的属性width和height。

这是您修改后的代码。

new version

#canvas {
  width: 300px;
  height: 300px;
  border: 1px solid black;
}

    <canvas id="canvas" width="300" height="300"></canvas>

如果您想要一个响应式画布，只要它改变大小，您就需要更新宽度和高度属性。

为什么帆布线在一个角度上更粗？

1 个答案: