Built-in objects
Previous
Options
Next
Coordinate system
Loading...
We all know the window object in the browser, the entry point of the DOM tree is window.document, and the entry point usually contains a root node <html> element, which can be obtained from window.document.documentElement. We add various DOM elements to this root node, such as <head>, <body>, etc.
Canvas canvases can be analogous to window objects. Similarly, each canvas is created with a built-in entry Document, which can be obtained via canvas.document. This entry contains the root node of Scene Graph, which can be obtained via canvas.document.documentElement, and then you can add graphics to this root node via appendChild to complete the rendering. and then you can add graphics to this root node with appendChild to complete the rendering.
Returns a built-in Document object that holds the root node of the scene graph. After getting this root node via document.documentElement, you can add child nodes using the scene graph capability:
// append a Circle to canvascanvas.document.documentElement.appendChild(circle);canvas.document.documentElement.children; // [circle]
In addition to the add/remove node capability, other scene graph and event capabilities are also available on the root node:
canvas.document.documentElement.getBounds();canvas.document.addEventListener('click', () => {});
Alias of getRoot(), so the following two ways of writing it are equivalent:
const root = canvas.getRoot(); // Groupconst root = canvas.document.documentElement;
Get [rendering context](/en/api/renderer#rendering environment context), which is implemented by the renderer (g-canvas/svg/webgl). There are many common methods on this rendering context, such as:
getDomElement() Get the DOM element of current renderer, for example g-canvas/webgl will return a <canvas> element while g-svg will return a <svg> element.getDPR() Get devicePixelRatio of current rendering context.Get camera and subsequently perform operations on that camera, such as switching projection mode, completing camera actions and animations, etc.
const camera = canvas.getCamera();// camera actionscamera.pan();camera.rotate();// switch to perspective projectioncamera.setPosition(300, 100, 500).setFocalPoint(300, 250, 0).setPerspective(0.1, 1000, 75, 600 / 500);