如何在JavaScript画布中绘制坐标

Question

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

谢谢

Answer 1

下面的代码可能会对您有所帮助。在其中创建一个画布，将宽度和高度设置为40 (以模拟-20到20)，然后将放置在数组中的点组合成Path2D 路径数据。20被添加到x坐标中，因为画布只显示正平面上的坐标，y坐标为负，40被添加到它们中，因为画布上的0，0是左上角，正y坐标下降而不是向上。

​

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元素和一个path元素，在两个轴上将SVG的viewBox设置为-20至20，然后将前面示例中相同的路径数据添加到路径的'd‘属性中。因为SVG的viewBox被改变了，所以X和Y没有那么大的变化，但是Y仍然是负的--原因和画布解决方案一样。

​

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，则此解决方案将有效。

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