Bản vẽ 3D Canvas sử dụng cả ngữ cảnh 2D và 3D

Question

Vì webgl/opengl không hỗ trợ vẽ văn bản nên có thể vẽ đối tượng 3D bằng ngữ cảnh 3D và vẽ văn bản bằng ngữ cảnh 2D?

Answer 1

Không, rất tiếc là không.

HTML 5 spec nói rằng nếu bạn gọi getContext trên phần tử canvas đã ở một khác nhau context mode và hai ngữ cảnh không tương thích thì trả lại null.

Thật không may "webgl" và bức tranh sơn dầu "2d" không tương thích và do đó bạn sẽ nhận được null:

var canvas = document.getElementById('my-canvas'); 
var webgl = canvas.getContext("webgl"); // Get a 3D webgl context, returns a context 
var twod = canvas.getContext("2d"); // Get a 2D context, returns null 

Answer 2

Tạo văn bản làm kết cấu bằng canvas 2D, sau đó hiển thị nó ở chế độ 3D. Xem here để biết hướng dẫn.

Answer 3

Như đã trình bày, bạn không thể làm điều này.

Tuy nhiên, bạn có thể đặt một canvas lên một hình khác và vẽ chúng một cách riêng biệt. Tôi đã làm điều này trước đây và nó có thể hoạt động khá tốt.