Question

我正在尝试在画布上绘制一个元素但是每当我绘制画布时，这些线都会变得褪色而不是粗体。我不明白为什么这会发生在我的代码中...每当我尝试使用W3schools的代码时，结果都很好。这是我的代码和下面的图片。

enter image description here

<!DOCTYPE html>
<html>
<head>
  <title>Talk Walk</title>
  <style type="text/css">
    #canvas {
      position: absolute;
      top: 0px;
      left: 0px;
      height: 500px;
      width: 750px;
      background-color: blue;
    }
  </style>
</head>
<body>
  <canvas id="canvas"></canvas>
  <script>
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext("2d");
    ctx.fillStyle = "green";
    ctx.fillRect(0,0,150,75);
  </script>
</body>
</html>

Answer 1

这里的问题是，当您正在绘制矩形时，会出现一些锯齿。
发生这种情况是因为＆＃34; edge＆＃34;绿色矩形的精确度不是精确地绘制在一个像素上。通常情况下，你不会真正看到它，但是由于你通过使用css设置它的宽度和高度来伸展画布，你会得到这样的结果：

＆＃13;

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext("2d");
ctx.fillStyle = "green";
ctx.fillRect(0,0,150,75);

＆＃13;

#canvas {
    height: 500px;
    width: 750px;
    background-color: blue;
}

＆＃13;

<canvas id="canvas"></canvas>

＆＃13;

要解决此问题，请使用width和height HTML属性，而不是css：

＆＃13;

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext("2d");
ctx.fillStyle = "green";
ctx.fillRect(0,0,150,75);

＆＃13;

#canvas {
    background-color: blue;
}

＆＃13;

<canvas id="canvas" height="500" width="750"></canvas>

＆＃13;

这样可以正确地缩放画布，因此混叠（如果放大则仍然存在）不会缩放。

画布元素线不直？

1 个答案: