我该如何绘制一个隐函数图形？

Question

我正在尝试开发一种隐式绘图工具。
例如，如果我想绘制一个抛物线，则x会变化，相应的y值将被计算出来。

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');


ctx.beginPath();

// y = (x-5)*(x-5) 

var iPoints=20,
nY=0;

for (var x=-10; x<=iPoints; x++) {
    nY = ( (x-5)*(x-5) );
    ctx.lineTo(200-x, 300-nY);
}
ctx.stroke();

或者在这里查看https://jsfiddle.net/a0gLqrvr/ 但是我如何绘制一个隐式函数？
例如：
x^3 + y^3 = 3*x*y^2 - x - 1
我如何同时改变 x 和 y？
你能通过一个示例（也许在 jsfiddle 中）向我展示吗？
提前致谢。

- user3815508

Answer 1

要绘制 f(x,y)=0，请使用 marching squares方法：

• 将您的区域划分为小单元格的网格

• 计算每个单元格顶点处的f符号

• 找到曲线在单元格上穿过的位置：在具有不同符号的边缘上。使用线性插值找到交叉点，并用线段将它们连接起来。

- lhf

---

谢谢您的回答。是的，我明白了。不幸的是，在“隐式函数”的情况下，如果没有“线性插值”和“行进方块”，绘制的曲线通常会是虚线。 - user3815508

我仍在编写“隐式函数”。但是很遗憾，没有成功。我觉得你有线索。你能否详细描述一下你的解决方案？也许你想看看我的方法，但它们都失败了。http://stackoverflow.com/questions/43072126/how-to-find-y-for-corresponding-x-values-implicit-function-complex-number/43072826?noredirect=1 还有这里 http://stackoverflow.com/questions/43080688/algorithm-which-adapt-solve-the-complex-equations-implicit-function-fx-y 非常感谢。 - user3815508

Answer 2

这不是最好的方法，也不是最快的方法。但这是一个简单的方法来完成它:

// x^2 + y^2 = 25^2
for (var x=-30; x<=+30; x+=0.01) {
  var smallest=1e10;
  var best_y=0;
  for (var y=-30; y<=+30; y+=0.01) {
    var v=Math.abs(x*x+y*y-625);
    if(v<smallest) {smallest=v;best_y=y;}
  }
  if(smallest<0.1) {
    ctx.fillRect(100+x, 100-best_y,1,1);
  }
}

你会得到类似这样的东西：

你可以在这里看到 jsfiddle 链接。

- Kamyar Infinity

---

谢谢你的回答。它同时变化x和y。也许我会使用“moveTo”和“lineTo”而不是“fillRect”。 - user3815508