画布3d绘制点

Question

我刚看到画布上的链接How To Create 3D Graphics Using Canvas (Windows)。

我该如何使用相同的方法绘制一个简单的点，如(x,y,z)=(3,2,5)？ 任何想法如何做到这一点？

Answer 1

它需要你通过专门绘制和查看窗体的具有3D功能的例子z=f(x,y)

首先什么是代码，然后考虑绘制各个点的范围内发生的简要说明。

如果您转到这个示例页面canvas3dRotation.html和查看源代码，你会发现以下内容：

Surface.prototype.equation = function(x, y) 
     /* 
     Given the point (x, y), returns the associated z-coordinate based on the provided surface equation, of the form z = f(x, y). 
     */ 
     { 
     var d = Math.sqrt(x*x + y*y); // The distance d of the xy-point from the z-axis. 

     return 4*(Math.sin(d)/d); // Return the z-coordinate for the point (x, y, z). 
     } 

这将把给定的公式。

以下代码存储绘制公式所需的所有点。这些存储在surface.points阵列中。

Surface.prototype.generate = function() 
     /* 
     Creates a list of (x, y, z) points (in 3 x 1 vector format) representing the surface. 
     */ 
     { 
     var i = 0; 

     for (var x = constants.xMin; x <= constants.xMax; x += constants.xDelta) 
     { 
      for (var y = constants.yMin; y <= constants.yMax; y += constants.yDelta) 
      { 
      this.points[i] = point(x, y, this.equation(x, y)); // Store a surface point (in vector format) into the list of surface points.    
      ++i; 
      } 
     } 
     } 

使用这种方法显然是在很多快于写出所有你想要单独绘制点，没有3D例子是基于只有一个点。

但是，假设您想绘制单个点，那么您应该删除357 surface.generate（）中的一行并将其替换为代码以绘制所有单个点。这意味着新的代码

所以先添加一个新方法的代码

Surface.prototype.plot = function(x, y, z) 
     /* 
     add the point (x, y, z) (in 3 x 1 vector format) to the surface. 
     */ 
     { 
      this.points.push(point(x, y, z)); // Store a surface point 
     } 

然后，而不是surface.generate()，使用surface.plot(3,2,5)。

当然，他们的例子有8100点，所以要多绘制或找到一种方法来生成所有要绘制的点。

希望这有助于你开始。