First, the establishment canvas canvas
<Canvas id = "myCanvas" width = "200" height = "200" style = "border: 1px solid # 000000;"> </ canvas> [Ps: width, height is the width and height of the canvas, the style is to show that canvas, drawn in the js]
Second, run the script in
A: id element to obtain the current canvas. Such as: var myCanvas = document.getElemetById ( "myCanvas");
B: Get this method on an object, obtaining 2d context object . var ctx = myCanvas.getContext ( "2d" );
contextType following four parameters:
"2d", create a CanvasRenderingContext2D object as a 2D rendering context.
"Webgl" (or "experimental-webgl"), to create a 3D object as WebGLRenderingContext rendering context is available only in the realization, on the experimental properties of 2 WebGL browser.
"Webgl2", create a WebGL2RenderingContext object as a 3D rendering context, available only in the realization of the browser WebGL 3.
"Bitmaprenderer", to create a ImageBitmapRenderingContext, for rendering the bitmap to the canvas context, experimental characteristics.
