Question

我今天开始学习HTML5 / Javascript / Canvas，所以请对我很轻松。

我想在范围sin(x)上绘制x=-Pi..Pi。因此，逻辑坐标将从x=-Pi..Pi和y=-1..1延伸。我不想使用绘图库或任何外部函数。我想学习如何在javascript和HTML5中完成所有这些。

画布尺寸为width=200和height=100，以像素为单位。

经过大量的阅读和谷歌搜索后，我了解到我需要使用translate和scale来处理逻辑坐标，而不是基于物理（像素）的坐标。

最后我得到了正确的情节，但线太粗了。看起来线条厚度不受缩放影响？如何使线条厚度远低于下图所示？

我想在javascript中生成的图是（来自Matematica）

Mathematica graphics

我现在用HTML获取的是

Mathematica graphics

有人可以查看代码并建议修复线厚度问题需要什么吗？我正确地进行缩放吗？

形状似乎正确，就是线太粗了。这是我刚写的完整代码

function draw() {
  var canvas = document.getElementById('canvas');
  var W = canvas.width;
  var H = canvas.height;
  var ctx = canvas.getContext('2d');
  ctx.lineWidth = 1; // attempt to make line less thick, but no effect

  ctx.rect(0, 0, W, H); // draw frame around the physical canvas
  ctx.stroke();
  ctx.save();

  ctx.translate(W / 2, H / 2); //put coordinates system origin in middle
  ctx.scale(W / (2 * Math.PI), -H / 2); //Is this correct?
  // want logical width to be 2 PI and logical height 2.
  // the minus sign due to flipping of y axis.

  var lowEnd = -Math.PI; // x range is -Pi..Pi
  var highEnd = Math.PI;
  var xValues = [];
  var yValues = [];

  while (lowEnd <= highEnd) //generate x,y points
  {
    xValues.push(lowEnd);
    yValues.push(Math.sin(lowEnd));
    lowEnd += (Math.PI) / 10; // arbitray sampling interval
  }
  // start drawing the points generated above
  ctx.beginPath();
  ctx.moveTo(xValues[0], yValues[0]); //move to starting point of curve.

  for (var i = 1; i < xValues.length; i++) {
    //console.log(xValues[i],yValues[i]);
    ctx.lineTo(xValues[i], yValues[i]);
    ctx.stroke();
  }
  ctx.restore();
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
</head>
<body onload="draw();">
  <canvas id="canvas" width="200" height="100"></canvas>
</body>
</html>

在画布

0 个答案: