如何在 JavaScript Canvas 中绘制坐标

Question

我想用 JavaScript 和 Canvas 绘制像 4x^2+3x+4 这样的多项式。 为此，我在 JavaScript 中写了一个 function，它计算了这个多项式的这些值，并在区间 [-20, +20] 中返回 2000 x/y 坐标。 我如何在 Canvas 中绘制这个坐标？

谢谢

Answer 1

类似以下代码的内容可能会对您有所帮助。 在其中，创建了一个 canvas，宽度和高度设置为 40（模拟 -20 到 20），然后将放置在数组中的点组合成Path2D路径数据。 将 20 添加到 x 坐标，因为 canvas 仅显示正平面上的坐标，并且将 y 坐标设为负数并添加 40，因为 canvas 上的 [0, 0] 是左上角，正 y 坐标go 向下而不是向上。

 document.addEventListener('DOMContentLoaded', () => { var canvas = document.createElement('canvas'); var context = canvas.getContext('2d'); canvas.width = 40; canvas.height = 40; var points = []; for(var i = -20; i <= 20; i+= 0.01) { points.push(i+20, -(4*i**2+3*i+4)+40); } var path = new Path2D('M '+points.shift()+' '+points.shift()+' L '+points.join(' ')); context.stroke(path); document.body.append(canvas); });

但是，我建议使用 SVG 代替 - 如果可能的话。 这是一个非常相似的想法，但它可能会产生更高质量的结果。 在此示例中，创建了一个 svg 元素和一个路径元素，SVG 的 viewBox 在两个轴上都设置为 -20 到 20，然后将上一个示例中的相同路径数据添加到路径的 'd' 属性中。 X 和 Y 并没有因为 SVG 的 viewBox 发生变化而发生太大变化，但 Y 仍然是负数——原因与 canvas 解决方案相同。

 document.addEventListener('DOMContentLoaded', () => { var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); var path = document.createElementNS('http://www.w3.org/2000/svg', 'path'); var points = []; for(var i = -20; i <= 20; i+= 0.01) { points.push(i, -(4*i**2+3*i+4)); } svg.setAttribute('viewBox', '-20 -20 40 40'); path.setAttribute('d', 'M '+points.shift()+' '+points.shift()+' L '+points.join(' ')); path.setAttribute('fill', 'transparent'); path.setAttribute('stroke', 'black'); svg.append(path); document.body.append(svg); });

您可能已将坐标存储在如下数组中：[[x, y], [x, y]]。 如果是这样，如果使用array.flat()将数组转换为 [x, y, x, y]，则此解决方案将起作用。

我可能没有正确解释这些代码片段，但希望这个答案对您有用。