个人中心
gpt4 book ai didi

javascript - 为什么它不在 Canvas 中绘制指数曲线？

转载 作者：行者123 更新时间：2023-12-05 05:46:25 25 4
gpt4 key购买 nike

我在学校学习 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 轴镜像到笛卡尔轴系(从下到上)

最佳答案

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

如果你想让代码显示一些有用的东西，我们可以为 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>

关于javascript - 为什么它不在 Canvas 中绘制指数曲线？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/71197687/

25 4 0
文章推荐： c# - 将对象在 -45 到 45 度之间旋转未按预期运行
文章推荐： css - 在 vuetify 中维护跨 `default.vue` 和 `index.vue` 的网格系统
文章推荐： sql-server - 使用代理执行 SSIS 包 - 无法获取 Proxy_id 的代理数据
文章推荐： python - pipenv 安装后操作
行者123
个人简介

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

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