Zdog là một thư viện JavaScript nhỏ gọn để vẽ hình minh hoạ kiểu 3D lên <canvas> hoặc SVG. Các hình khối có vị trí thật trong không gian 3D và xoay được như vật thể 3D, nhưng lại được vẽ thành hình phẳng, nên kết quả trông giống một bức minh hoạ phẳng có thể xoay qua xoay lại hơn là một bản dựng 3D (3D render). Làm một lá cờ đơn giản thì rất hợp.

Ví dụ Zdog tối giản

#

Hai hình khối, kéo chuột để xoay, và một vòng lặp hoạt ảnh (animation loop):

<canvas class="zdog-canvas" width="240" height="240"></canvas>
<script src="https://unpkg.com/zdog@1/dist/zdog.dist.min.js"></script>
<script>
  const illo = new Zdog.Illustration({
    element: '.zdog-canvas',
    dragRotate: true, // drag to turn the scene
  });

  // a square, pushed back
  new Zdog.Rect({
    addTo: illo,
    width: 80,
    height: 80,
    translate: { z: -30 },
    stroke: 8,
    color: '#0047a0',
  });

  // a filled circle, pulled forward
  new Zdog.Ellipse({
    addTo: illo,
    diameter: 60,
    translate: { z: 30 },
    stroke: 8,
    color: '#cd2e3a',
    fill: true,
  });

  function animate() {
    illo.rotate.y += 0.02;
    illo.updateRenderGraph();
    requestAnimationFrame(animate);
  }
  animate();
</script>

Mỗi hình được gắn vào khung cảnh bằng addTo, và chính translate.z tạo ra cảm giác 3D: xoay khung cảnh thì hình tròn sẽ vòng ra phía trước hình vuông. updateRenderGraph() cập nhật và vẽ lại toàn bộ, nên nó nằm trong vòng lặp.

Tài liệu chính thức

#

https://zzz.dog/

Toàn bộ mã nguồn của ví dụ này có trên CodePen, bạn cứ vào xem.

Ví dụ của tôi

#