个人中心
gpt4 book ai didi

javascript - Canvas 元素线条不直？

转载 作者：行者123 更新时间：2023-11-29 18:11:58 26 4
gpt4 key购买 nike

我试图在 Canvas 上绘制一个元素，但每当我绘制 Canvas 时，线条都会变淡且不粗体。我不明白为什么我的代码会发生这种情况。每当我尝试使用 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>

最佳答案

这里的问题是在绘制矩形时会出现一些锯齿现象。
发生这种情况是因为绿色矩形的“边缘”没有精确绘制在像素上。通常情况下，您不会真正看到它，但由于您通过使用 css 设置它的宽度和高度来拉伸(stretch) Canvas ，您会得到以下结果:

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext("2d");
ctx.fillStyle = "green";
ctx.fillRect(0,0,150,75);
#canvas {
    height: 500px;
    width: 750px;
    background-color: blue;
}
<canvas id="canvas"></canvas>

要解决这个问题，请使用 width 和 height HTML 属性，而不是 css:

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext("2d");
ctx.fillStyle = "green";
ctx.fillRect(0,0,150,75);
#canvas {
    background-color: blue;
}
<canvas id="canvas" height="500" width="750"></canvas>

这会适本地缩放 Canvas ，因此别名(如果放大仍然存在)不会按比例放大。

关于javascript - Canvas 元素线条不直？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26628009/

26 4 0
文章推荐： javascript - 为什么这个 Javascript 无法识别鼠标弹起？
文章推荐： javascript - meteor 条件 CSS
文章推荐： Android: float - 摆脱尾随点零
文章推荐： javascript - 在浏览器中使用 JavaScript 控制台自动滚动
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com