为什么不画canvas的指数曲线呢？

Question

我在学校学习 javascript 的基础知识，现在我正在研究 canvas

这是我的代码

canvas = document.getElementById("myCanvas")
ctx = canvas.getContext("2d")
offset = canvas.width / 2

function assi() {
  ctx.clearRect(0, 0, canvas.width, canvas.height)
  ctx.beginPath()
  ctx.moveTo(offset, 0)
  ctx.lineTo(offset, offset * 2)
  ctx.moveTo(0, offset)
  ctx.lineTo(offset * 2, offset)
  ctx.stroke()
}

function f(x) {
  return Math.pow(2, x) * -1;
}

function draw() {
  assi()
  ctx.beginPath()
  ctx.strokeStyle = "red"

  moveTo(offset, f(0) + offset)
  for (let x = -offset; x < offset; x++) {
    ctx.lineTo(x + offset, f(x) + offset)
  }
  ctx.stroke()
}

<body onload="draw()">
  <canvas height="800" width="800" id="myCanvas"></canvas>
  <script src="script.js"></script>
</body>

这是我的问题
为什么在函数 f(x) 中，如果我离开 *-1 它不绘制任何东西，而如果我删除 *-1 它会绘制一些东西？

它绘制了线性函数，但是指数函数给出了问题，而不是 Math.pow() 问题，因为如果我使用 1 作为基数它就可以工作（实际上画了一条线，但是是正确的）

需要*-1将canvas轴系（从上到下）的y轴镜像到笛卡尔轴系（从下到上）

Answer 1

看起来画线到非常高的负数会导致问题...

如果你想让代码显示一些有用的东西，我们可以为 Y 值为正的那些添加一个 if 语句，我们也可以限制为不太大的负值，但我把它留给你。
我正在绘制弧线来显示点，还划分函数的输出以降低数量，显示不同的曲线。

const canvas = document.getElementById("myCanvas")
const ctx = canvas.getContext("2d")
const offset = canvas.width / 2

function f(x) {
  return Math.pow(2, x) * -1;
}

let colors = ["black","cyan", "red", "blue", "green", "pink"]
for (let i = 1; i <= colors.length; i++) {
  ctx.beginPath()
  ctx.strokeStyle = colors[i-1]
  for (let x = -offset; x < offset; x++) {
    let y = f(x/i) + offset + i*10
    if (y > 0) {
      ctx.arc(x + offset, y, 1, 0, 6)
    }
  }
  ctx.stroke()
}

<canvas height="200" width="200" id="myCanvas"></canvas>

这是您的全部代码：

canvas = document.getElementById("myCanvas")
ctx = canvas.getContext("2d")
offset = canvas.width / 2

function assi() {
  ctx.clearRect(0, 0, canvas.width, canvas.height)
  ctx.beginPath()
  ctx.moveTo(offset, 0)
  ctx.lineTo(offset, offset * 2)
  ctx.moveTo(0, offset)
  ctx.lineTo(offset * 2, offset)
  ctx.stroke()
}

function f(x) {
  return Math.pow(2, x) * -1;
}

function draw() {
  assi()
  ctx.beginPath()
  ctx.strokeStyle = "red"

  moveTo(offset, f(0) + offset)
  for (let x = -offset; x < offset; x++) {
    let y = f(x) + offset
    if (y > -1000) {
      ctx.lineTo(x + offset, y)
    }
  }
  ctx.stroke()
}

<body onload="draw()">
  <canvas height="200" width="200" id="myCanvas"></canvas>
</body>

为什么不画canvas的指数曲线呢？

Why it doesn't draw the exponential curve in canvas?

html

javascript

html5-canvas