Vẽ cầu 3D (sphere) bằng HTML5 Canvas

Để tạo hiệu ứng cầu 3D trên Canvas 2D, bạn có thể mô phỏng bằng cách vẽ nhiều vòng tròn (latitude lines) với bán kính thay đổi theo hàm cos/sin, tạo ảo giác độ sâu.

Hàm tạo đối tượng cầu

function Sphere(r) {
  this.points = [];
  this.color = "blue";
  this.r = (typeof r === "number") ? r : 20.0;
  this.vertexCount = 0;

  for (let alpha = 0; alpha <= 2 * Math.PI; alpha += 0.17) {
    const p = { x: 0, y: 0, z: 0 };
    p.x = Math.cos(alpha) * this.r;
    p.y = 0;
    p.z = Math.sin(alpha) * this.r;
    this.points[this.vertexCount++] = p;
  }
}

Mở rộng để vẽ cầu 3D đầy đủ

Mã trên chỉ tạo các đỉnh trên một đường tròn lớn (equator). Để vẽ cầu thực sự, bạn cần:

• Lặp qua nhiều vĩ độ (latitude) từ -π/2 đến π/2.
• Tại mỗi vĩ độ, tính bán kính ngang = r * cos(lat), độ cao = r * sin(lat).
• Áp dụng phép chiếu (projection) 3D->2D (ví dụ orthographic hoặc perspective).
• Sắp xếp vẽ theo thứ tự độ sâu (painter's algorithm) hoặc dùng z-buffer.

Để có cầu 3D thật sự với ánh sáng, culling, texture..., khuyến nghị sử dụng WebGL (Three.js, Babylon.js) thay vì Canvas 2D thuần túy.