HTML DOM GetContext () method
HTML DOM Canvas Object
Definition and usage
The GetContext () method returns an environment for drawing on the canvas.
Grammar
Canvas.getcontext (ContextID)
Parameters
The parameter ContextID specifies the type you want to draw on the canvas. The currently unique legal value is "2d", which specifies a two-dimensional drawing and causes this method to return an environment object that exports a two-dimensional drawing API.
Tip: In the future, if the <canvas> tag expands to support 3D plotting, the GetContext () method may allow a "3d" string parameter to be passed.
return value
A Canvasrenderingcontext2d object that can be drawn to the Canvas element using it.
Describe
Returns an environment that represents the type of environment used to draw. It is intended to provide different environments for different drawing types (2-D, 3-D). Currently, the only support is "2d", which returns a Canvasrenderingcontext2d object that implements most of the methods used by a canvas.
For a simple example, draw a Gobang chessboard as an example:
<id= "Chess" width= "450px" height= "450px" ></ Canvas >
varChess = document.getElementById ("Chess");varContext = Chess.getcontext ("2d"); Context.strokestyle= "#0A0A0A";varLogo =NewImage (); LOGO.SRC= "Image/chess.jpg";//callback method after the picture is loadedLogo.onload =function(){ //Draw the keyboardContext.drawimage (logo, 0, 0, 450, 450); Drawchessborad (); }varDrawchessborad =function(){ for(vari = 0; I < 15; i++) {Context.moveto (+ i*30, 15); Context.lineto (+ i*30, 435); Context.moveto (, + i*30); Context.lineto (435, + i*30); Context.stroke (); }}
Why does canvas use GetContext (' 2d ') in HTML5?