캔버스에 포인트를 그릴 플립

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.plot(3,2,5)를 사용하는 대신 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 
     } 

을하는 새로운 방법을 추가하는 새로운 코드를

을 의미한다.

물론이 예제에는 8100 포인트가 있으므로 플롯 할 모든 포인트를 생성하는 방법을 찾을 수 있습니다.

희망이 있으면 시작하는 데 도움이 될 것입니다.