我在学校学习javascript的基础知识,现在我正在画布上工作

This is my code

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>

This is my question
why in the function f(x) if I leave *-1 it doesn't draw anything, while if I delete *-1 it draws something?

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

The 100 is needed to mirror the y-axis of canvas axis system (up to down) into cartesian axis system (down to up)

推荐答案

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

If you want that code to show something useful, we can add an if statement for those with positive Y values, we could also restrict to a not so big negative, but I leave that up to you.
I'm drawing arcs to show the points and also divide the output of the function to lower the amount, showing different curves.

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>

Javascript相关问答推荐

Regex可以 Select 以任何顺序匹配组

详细更改参考价值:"

如何expose 像React在onChange、onClick等中所做的那样的参数?

添加/删除时React图像上传重新渲染上传的图像

如何解决这个未能在响应上执行json:body stream已读问题?

ReactJS中的material UI自动完成类别

vscode扩展-webView Panel按钮不起任何作用

我可以使用CSS有效地实现最大宽度=100%和最大高度=100%,而无需父母有明确的/固定的宽度和高度,替代方法吗?

如何将连续的十六进制字符串拆分为以空间分隔的十六进制块,每个十六进制块包含32个二元组?

按下同意按钮与 puppeteer 师

我可以从React中的出口从主布局调用一个处理程序函数吗?

如何从一个列表中创建一个2列的表?

WebRTC关闭navigator. getUserMedia正确

WebGL 2.0无符号整数输入变量

在WordPress中使用带有WPCode的Java代码片段时出现意外令牌错误

Next.js服务器端组件请求,如何发送我的cookie token?

try 使用javascript隐藏下拉 Select

同一类的所有div';S的模式窗口

如何在 Select 文本时停止Click事件?

使用类型:assets资源 /资源&时,webpack的配置对象&无效