2D canvas web page element rendering method, device and electronic device

Abstract

The present application discloses a method for rendering a 2D canvas web page element, comprising: intercepting a drawing instruction for a 2D canvas web page element from a client script layer; transmitting instruction information carried by the drawing instruction of the 2D canvas web page element to a system framework layer; generating an OpenGL drawing instruction corresponding to the drawing instruction of the 2D canvas web page element according to the instruction information; and drawing the OpenGL drawing instruction to an OpenGL rendering window of a system to form a rendering result of the 2D canvas web page element. The method can improve the problem of low rendering performance of 2D canvas web page elements.

Description

[0001] This application is a divisional application of a Chinese patent application filed on September 14, 2016, with application number 201610827353.8 and invention name “3D canvas web page element rendering method, device and electronic device”. Technical Field

[0002] The present application relates to the field of mobile Internet technology, and in particular to a method, device and electronic device for rendering 2D canvas web page elements. Background Art

[0003] With the development of Web technology and the implementation of HTML5 standards, HTML5 development is becoming more and more popular. HTML5 development has the advantages of cross-platform, low development cost, fast iteration, and easy dynamic publishing, and it occupies an increasingly large proportion in mobile App development. As an important feature of HTML5, the Canvas element plays an indispensable role in the display of mobile development pages, especially in image processing, animation display and other occasions.

[0004] In mobile applications, HTML5's 3D canvas relies on the system Webview to complete rendering and drawing, and the implementation depends on whether the system Webview supports the WebGL interface. WebGL is a 3D drawing standard that allows JavaScript and OpenGL ES 2.0 to be combined. By adding a JavaScript binding to OpenGL ES 2.0, WebGL can provide hardware 3D accelerated rendering for HTML5 Canvas, so that Web developers can use the system graphics card to display 3D scenes and models more smoothly in the browser, and can also create complex navigation and data visualization. Obviously, the WebGL technical standard eliminates the trouble of developing special rendering plug-ins for web pages, and can be used to create website pages with complex 3D structures, and can even be used to design 3D web games.

[0005] However, WebGL in HTML5's 3D canvas was not supported until Android 5.0 and iOS 8.0, and the supported version was only WebGL 1.1, not the latest WebGL 2.0. In summary, the prior art has the problem that some mobile operating systems do not support WebGL rendering. Summary of the invention

[0006] The present application provides a method, device and electronic device for rendering 3D canvas web page elements to solve the problem that some mobile operating systems do not support WebGL rendering in the prior art. The present application also provides a method, device and electronic device for rendering 2D canvas web page elements.

[0007] The present application provides a method for rendering a 3D canvas web page element, comprising:

[0008] Intercept WebGL drawing instructions for 3D canvas web page elements;

[0009] Transmitting the instruction information carried by the WebGL drawing instruction to the system framework layer;

[0010] Generate an OpenGL drawing instruction corresponding to the WebGL drawing instruction according to the instruction information;

[0011] The OpenGL drawing instructions are drawn to the OpenGL rendering window of the system to form a rendering result of the 3D canvas web page element.

[0012] Optionally, the intercepting of the WebGL drawing instruction for the 3D canvas web page element is performed in the following manner:

[0013] The WebGL drawing instruction is intercepted by replacing the DOM object of the 3D canvas web page element.

[0014] Optionally, also include:

[0015] The DOM object of the 3D canvas web page element is replaced with the replacement DOM object.

[0016] Optionally, before replacing the DOM object of the 3D canvas webpage element with the replacement DOM object, the method further includes:

[0017] Determine whether the operating system allows the DOM object replacement operation to be performed; if so, proceed to the next step; if not, use the Webview window to draw the 3D canvas web page element.

[0018] Optionally, transmitting the instruction information carried by the WebGL drawing instruction to the system framework layer includes:

[0019] Extracting the instruction information from the WebGL drawing instruction;

[0020] Generate a rendering command corresponding to the WebGL drawing instruction according to the first preset instruction conversion rule and the instruction information;

[0021] The rendering command is transmitted to the system framework layer.

[0022] Optionally, the transmitting the instruction information carried by the WebGL drawing instruction to the system framework layer is performed in the following manner:

[0023] The instruction information is transmitted to the system framework layer through JS bridge or JavaScript engine.

[0024] Optionally, the transmitting the instruction information carried by the WebGL drawing instruction to the system framework layer is performed in the following manner:

[0025] According to a preset time interval, the instruction information is transmitted to the system framework layer.

[0026] Optionally, generating an OpenGL drawing instruction corresponding to the WebGL drawing instruction includes:

[0027] Transmitting the instruction information from the system framework layer to the system local layer;

[0028] In the system local layer, the OpenGL drawing instruction is generated according to the instruction information.

[0029] Optionally, drawing the OpenGL drawing instruction to an OpenGL rendering window of a system includes:

[0030] Obtaining context information and rendering targets corresponding to the 3D canvas web page element;

[0031] Performing graphics rendering on the rendering target according to the context information and the OpenGL drawing instruction;

[0032] The render target is input into the system's off-screen buffer.

[0033] Optionally, the inputting the rendering target into the off-screen buffer of the system is performed in the following manner:

[0034] The plurality of rendering targets are synthesized into the off-screen buffer through FBO technology; different rendering targets correspond to different 3D canvas web page elements.

[0035] Optionally, before obtaining the context information corresponding to the 3D canvas element and the rendering target, the method further includes:

[0036] Determine whether the context information and the rendering target exist; if not, create the context information and the rendering target, and bind the context information and the rendering target.

[0037] Optionally, also include:

[0038] The OpenGL rendering window and the system's Webview window are synthesized to form a rendering result of the web page where the 3D canvas web page element is located.

[0039] Optionally, the OpenGL rendering window and the system's Webview window are synthesized in the following manner:

[0040] The OpenGL rendering window and the Webview window are mixed through the system's window management mechanism.

[0041] Optionally, non-3D canvas web page elements within the web page are drawn in the Webview window.

[0042] Optionally, the system includes an Andriod system or an iOS system.

[0043] Accordingly, the present application also provides a rendering device for a 3D canvas web page element, comprising:

[0044] A WebGL instruction interception unit, used to intercept WebGL drawing instructions for 3D canvas web page elements;

[0045] A WebGL instruction transmission unit, used for transmitting the instruction information carried by the WebGL drawing instruction to the system framework layer;

[0046] An OpenGL instruction generating unit, configured to generate an OpenGL drawing instruction corresponding to the WebGL drawing instruction according to the instruction information;

[0047] The OpenGL instruction drawing unit is used to draw the OpenGL drawing instruction to the OpenGL rendering window of the system to form the rendering result of the 3D canvas web page element.

[0048] Optionally, the WebGL instruction interception unit is specifically configured to intercept the WebGL drawing instruction by replacing the DOM object of the 3D canvas web page element.

[0049] Optionally, the WebGL instruction transmission unit includes:

[0050] An instruction information extraction subunit, used to extract the instruction information from the WebGL drawing instruction;

[0051] A rendering command generating subunit, configured to generate a rendering command corresponding to the WebGL drawing instruction according to a first preset instruction conversion rule and the instruction information;

[0052] The rendering command transmitting subunit is used to transmit the rendering command to the system framework layer.

[0053] Optionally, the OpenGL instruction generation unit includes:

[0054] An instruction information transmission subunit, used for transmitting the instruction information from the system framework layer to the system local layer;

[0055] The OpenGL instruction generation subunit is used to generate the OpenGL drawing instruction according to the instruction information in the system local layer.

[0056] Correspondingly, the present application also provides an electronic device, including: a display; a processor; and a memory, for storing a program for implementing a rendering method of a 3D canvas web page element. After the device is powered on and runs the program of the rendering method of the 3D canvas web page element through the processor, the following steps are performed: intercepting a WebGL drawing instruction for the 3D canvas web page element; transmitting instruction information carried by the WebGL drawing instruction to a system framework layer; generating an OpenGL drawing instruction corresponding to the WebGL drawing instruction according to the instruction information; and drawing the OpenGL drawing instruction to the system's OpenGL rendering window to form a rendering result of the 3D canvas web page element.

[0057] Accordingly, the present application also provides a method for rendering a 2D canvas web page element, comprising:

[0058] Intercept drawing instructions for 2D canvas web page elements;

[0059] Transmitting the instruction information carried by the drawing instruction of the 2D canvas web page element to the system framework layer;

[0060] Generate an OpenGL drawing instruction corresponding to the drawing instruction of the 2D canvas web page element according to the instruction information;

[0061] The OpenGL drawing instructions are drawn to the OpenGL rendering window of the system to form a rendering result of the 2D canvas web page element.

[0062] Optionally, the intercepting of the WebGL drawing instruction for the 2D canvas web page element is performed in the following manner:

[0063] By replacing the DOM object of the 2D canvas web page element, the drawing instruction of the 2D canvas web page element is intercepted.

[0064] Optionally, transmitting the instruction information carried by the drawing instruction for the 2D canvas webpage element to the system framework layer includes:

[0065] Extracting the instruction information from the drawing instruction of the 2D canvas web page element;

[0066] Generate a rendering command corresponding to the drawing instruction of the 2D canvas webpage element according to the first preset instruction conversion rule and the instruction information;

[0067] The rendering command is transmitted to the system framework layer.

[0068] Optionally, generating an OpenGL drawing instruction corresponding to the drawing instruction of the 2D canvas webpage element includes:

[0069] Transmitting the instruction information from the system framework layer to the system local layer;

[0070] In the system local layer, the OpenGL drawing instruction is generated according to the instruction information.

[0071] Optionally, drawing the OpenGL drawing instruction to an OpenGL rendering window of a system includes:

[0072] Obtaining context information and rendering targets corresponding to the 2D canvas web page element;

[0073] Performing graphics rendering on the rendering target according to the context information and the OpenGL drawing instruction;

[0074] The render target is input into the system's off-screen buffer.

[0075] Optionally, also include:

[0076] The OpenGL rendering window and the system's Webview window are synthesized to form a rendering result of the web page where the 2D canvas web page element is located.

[0077] Accordingly, the present application also provides a rendering device for a 2D canvas web page element, comprising:

[0078] An instruction interception unit, used to intercept drawing instructions for 2D canvas web page elements;

[0079] An instruction transmission unit, used for transmitting the instruction information carried by the drawing instruction of the 2D canvas web page element to the system framework layer;

[0080] An OpenGL instruction generating unit, configured to generate an OpenGL drawing instruction corresponding to the drawing instruction of the 2D canvas webpage element according to the instruction information;

[0081] The OpenGL instruction drawing unit is used to draw the OpenGL drawing instruction to the OpenGL rendering window of the system to form the rendering result of the 2D canvas web page element.

[0082] Optionally, the instruction interception unit is specifically used to intercept the drawing instruction of the 2D canvas web page element by replacing the DOM object of the 2D canvas web page element.

[0083] Optionally, the instruction transmission unit includes:

[0084] An instruction information extraction subunit, used to extract the instruction information from the drawing instruction of the 2D canvas web page element;

[0085] A rendering command generating subunit, configured to generate a rendering command corresponding to the drawing instruction of the 2Dcanvas webpage element according to a first preset instruction conversion rule and the instruction information;

[0086] The rendering command transmitting subunit is used to transmit the rendering command to the system framework layer.

[0087] Optionally, the OpenGL instruction generation unit includes:

[0088] An instruction information transmission subunit, used for transmitting the instruction information from the system framework layer to the system local layer;

[0089] The OpenGL instruction generation subunit is used to generate the OpenGL drawing instruction according to the instruction information in the system local layer.

[0090] Correspondingly, the present application also provides an electronic device, including: a display; a processor; and a memory, for storing a program for implementing a rendering method of a 2D canvas web page element. After the device is powered on and runs the program of the rendering method of the 2D canvas web page element through the processor, the following steps are performed: intercepting a drawing instruction for the 2D canvas web page element; transmitting the instruction information carried by the drawing instruction of the 2D canvas web page element to the system framework layer; generating an OpenGL drawing instruction corresponding to the drawing instruction of the 2D canvas web page element according to the instruction information; and drawing the OpenGL drawing instruction to the OpenGL rendering window of the system to form a rendering result of the 2D canvas web page element.

[0091] Compared with the prior art, the method provided by the present application intercepts the WebGL drawing instructions for the 3D canvas web page element; transmits the instruction information carried by the WebGL drawing instructions to the system framework layer; generates OpenGL drawing instructions corresponding to the WebGL drawing instructions according to the instruction information; draws the OpenGL drawing instructions to the OpenGL rendering window of the system to form the rendering result of the 3D canvas web page element.

[0092] Using the rendering method of 3D canvas web page elements provided by the present application, the instruction information carried by the intercepted WebGL drawing instructions for the 3D canvas web page elements is transmitted from the client script layer to the system framework layer, and the OpenGL drawing instructions corresponding to the WebGL drawing instructions are obtained according to the instruction information, and then the OpenGL drawing instructions are drawn into the system's OpenGL rendering window to form the rendering result of the 3D canvas web page elements; this processing method avoids using the system Webview to render and draw the 3D canvas web page elements; therefore, the compatibility and coverage of HTML5 3D Canvas support in mobile Web applications can be improved, so that applications in mobile devices that originally do not support WebGL or support WebGL poorly can use WebGL for animation rendering.

[0093] The rendering method of the 3D canvas web page element provided in the present application fully eliminates the dependence on the operating system by introducing the JavaScript bridge layer and the system framework layer, is compatible with the existing mobile operating systems, and has strong compatibility, thereby achieving a cross-platform technical effect. BRIEF DESCRIPTION OF THE DRAWINGS

[0094] Figure 1 It is a flowchart of an embodiment of a method for rendering a 3D canvas web page element provided by the present application;

[0095] Figure 2 It is a structural schematic diagram of an embodiment of a method for rendering a 3D canvas web page element provided by the present application;

[0096] Figure 3 It is a specific flow chart of an embodiment of a method for rendering a 3D canvas web page element provided by the present application;

[0097] Figure 4 is a schematic diagram of an embodiment of a rendering device for a 3D canvas web page element provided by the present application;

[0098] Figure 5 is a schematic diagram of an embodiment of an electronic device provided by the present application;

[0099] Figure 6 It is a flowchart of an embodiment of a method for rendering a 2D canvas web page element provided by the present application;

[0100] Figure 7 It is a structural schematic diagram of an embodiment of a method for rendering a 2D canvas web page element provided by the present application;

[0101] Figure 8 It is a specific flow chart of an embodiment of a method for rendering a 2D canvas web page element provided by the present application;

[0102] Fig. 9 is a schematic diagram of an embodiment of a rendering device for a 2D canvas web page element provided by the present application;

[0103] Fig.10 It is a schematic diagram of an embodiment of an electronic device provided by the present application. DETAILED DESCRIPTION

[0104] Many specific details are described in the following description to facilitate a full understanding of the present application. However, the present application can be implemented in many other ways different from those described herein, and those skilled in the art can make similar generalizations without violating the connotation of the present application, so the present application is not limited by the specific implementation disclosed below.

[0105] In the present application, a method, device and electronic device for rendering a 3D canvas web page element are provided, which are described in detail one by one in the following embodiments.

[0106] The core basic idea of ​​the rendering method of 3D canvas web page element provided by the present application is: intercepting the WebGL drawing instruction of the 3D canvas web page element, and transmitting the instruction information carried by the intercepted WebGL drawing instruction from the client script layer to the system framework layer, and obtaining the OpenGL drawing instruction corresponding to the WebGL drawing instruction according to the instruction information, and then drawing the OpenGL drawing instruction into the OpenGL rendering window of the system to form the rendering result of the 3D canvas web page element. Since it can avoid using the system Webview to render and draw the 3D canvas web page element, the compatibility and coverage of HTML5 3D Canvas support in mobile Web applications can be improved.

[0107] Please refer to Figure 1 , which is a flow chart of an embodiment of a method for rendering a 3D canvas web page element of the present application. The method comprises the following steps:

[0108] Step S101: intercepting a WebGL drawing instruction for a 3D canvas web page element.

[0109] The canvas tag appeared in HTML5. It first supported 2D graphics drawing, and now it has 3D drawing based on WebGL. The canvas element is a rectangular area that can control every pixel in it. The canvas element itself has no drawing capabilities. All drawing work must be done inside JavaScript, that is, the canvas element uses JavaScript to draw images on the web page.

[0110] WebGL is a 3D graphics API based on OpenGL ES 2.0, which allows 3D rendering to be implemented in web pages using WebGL similar to OpenGL. WebGL perfectly solves two problems of existing Web interactive 3D animations: first, it implements the production of Web interactive 3D animations through HTML scripts themselves, without any browser plug-in support; second, it uses the underlying graphics hardware acceleration function to perform graphics rendering, which is implemented through a unified, standard, cross-platform OpenGL interface.

[0111] The WebGL graphics API is used through the 3D canvas tag of HTML 5. In this application, the drawing operation instructions for the 3D canvas web page element in the JavaScript code are referred to as WebGL drawing instructions.

[0112] For example, the code for a canvas element is <canvas id="myCanvas"width="200"

[0113] height="100">, the element includes an id attribute, a width attribute, and a height attribute; the JavaScript drawing code for the element can be as follows:

[0114] <script type＝"text javascript">

[0115] var c＝document.getElementById("myCanvas")；

[0116] var cxt＝c.getContext("3d")；

[0117] cxt.fillStyle＝"#FF0000"；

[0118] cxt.fillRect(0,0,150,75)；

[0119] < / script>

[0120] As can be seen from the above code, JavaScript uses the id to find the canvas element, and then creates a context object. The getContext("3d") object is a built-in HTML5 object that has multiple methods for drawing 3D graphics. Among them, the cxt.fillRect(0,0,150,75) instruction is a WebGL drawing instruction. With the above code, a red rectangle can be drawn in the canvas element.

[0121] In the default case of the system, the 3D canvas web page element is drawn through the system's Webview window; the method provided in the present application intercepts the WebGL drawing instructions for the 3D canvas web page element and draws the 3D canvas web page element in the system's OpenGL rendering window.

[0122] The method provided in this application does not limit the way of intercepting WebGL drawing instructions, and any technology can be used to intercept WebGL drawing instructions for 3D canvas web page elements.

[0123] As an optional solution, this step can be implemented in the following manner: intercepting the WebGL drawing instruction by replacing the DOM object of the 3D canvas web page element.

[0124] The DOM (Document Object Model) of the web page where the 3D canvas web page element is located includes a DOM object corresponding to the 3D canvas web page element, and the DOM can be accessed through JavaScript (and other programming languages).

[0125] The replacement DOM object is a replacement object of the DOM object of the 3D canvas webpage element. To intercept the WebGL drawing instruction through the replacement DOM object, firstly, the DOM object of the 3D canvas webpage element in the DOM tree of the webpage where the 3D canvas webpage element is located needs to be replaced with the replacement DOM object.

[0126] In specific implementation, the 3D canvas web page element can be first obtained through the getElementById(id) method, and then the replacement DOM object of the 3D canvas web page element can be inserted through the appendChild(node) method. The replacement DOM object can be a custom child node, and finally, the 3D canvas web page element can be deleted through the removeChild(node) method. After the above processing, the WebGL drawing instructions of the 3D canvas web page element can be intercepted by replacing the DOM object.

[0127] As an optional solution, before replacing the DOM object of the 3D canvas web page element with the replacement DOM object, the method further includes: a step of determining whether the operating system allows the execution of a DOM object replacement operation; if the determination result is yes, executing the step of replacing the DOM object of the 3D canvas web page element with the replacement DOM object; otherwise, using a Webview window to draw the 3D canvas web page element.

[0128] By adopting this judgment and processing method, if a setting is made in advance to prohibit DOM object replacement in order to ensure the security of the operating system, the 3D canvas web page element can be drawn through the system default Webview window, thereby improving the user experience.

[0129] After the WebGL drawing instructions for the 3D canvas web page element are intercepted, the next step may be performed to transmit the instruction information carried by the intercepted WebGL drawing instructions from the client script layer to the system framework layer.

[0130] Step S103: transmitting the instruction information carried by the WebGL drawing instruction to the system framework layer.

[0131] The instruction information carried by the WebGL drawing instruction includes, but is not limited to, an instruction name and instruction parameters. For example, the instruction name carried by the WebGL drawing instruction drawCircle(200,300,5) is drawCircle, and the instruction parameters are: x coordinate is 200, y coordinate is 300, and radius is 5.

[0132] This step S103 may adopt the form of directly transmitting the instruction information, transmitting the instruction information carried by the WebGL drawing instruction from the client script layer to the system framework layer, or may adopt the following preferred solution as a specific implementation scheme.

[0133] As a preferred solution, this step S103 may include the following specific steps: 1) extracting the instruction information from the WebGL drawing instruction; 2) generating a rendering command corresponding to the WebGL drawing instruction according to a first preset instruction conversion rule and the instruction information; 3) transmitting the rendering command to the system framework layer.

[0134] Through the above-mentioned second step, various instruction information can be spliced ​​according to the first preset instruction conversion rule to form a preset rendering command (i.e., a standardized expression of the instruction information), and then through the above-mentioned third step, the instruction information is transmitted from the client script layer to the system framework layer in the form of a rendering command; this processing method can make it easy for subsequent links to parse the command, and then obtain the OpenGL drawing instruction corresponding to the WebGL drawing instruction.

[0135] In this embodiment, a GCanvas class is set up, and the class includes the instruction conversion program code corresponding to the second step as shown below:

[0136] GContextWebGL.prototype.uniform4f=function(location,x,y,z,w){

[0137] this._drawCommands+=(this.uniform4fId+location.id+","+x+","+y+","+z+","+w+";");

[0138] };

[0139] For example, the drawing instruction of WebGL is: WebGLRenderingContext.uniform4f(location,x,y,z,w). After being processed by the above code, the instruction is converted into a rendering command (command string): "17, 3, 100, 200, 300, 400;"; "17" refers to the instruction ID of the uniform4f method in GCanvas, "3" refers to the ID of the location object, "100, 200, 300" represents the position "x, y, z", "400" represents the width "w", the comma "," is a variable separator in GCanvas, and the semicolon ";" represents the command terminator in GCanvas.

[0140] It should be noted that this step S103 and the previous step S101 are both run in the client script layer. The client script layer may include the following functions: 1) Find whether there is a 3D canvas element that can be replaced in the HTML5 page. If there is and it can be successfully replaced, a new replacement DOM object is created and inserted into the original DOM tree, and the original 3D canvas element is deleted. All subsequent calls and operations on the original 3D canvas element will be managed by the newly inserted DOM object; 2) Intercept the WebGL drawing instructions for the original 3D canvas web page element, and transmit the instruction information carried by the drawing instruction from the client script layer to the system framework layer. In addition, the client script layer is also used to respond to user interaction instructions for web page elements, respond to callback functions, calculate the size and position of canvas web page elements, and manage the layers of multiple canvas web page elements.

[0141] The system framework layer refers to an application framework layer that uses the native language of the operating system to develop programs. For example, when the method of the present application is applied in an Android system, the system framework layer is a program layer developed in the Java language; when the method of the present application is applied in an iOS system, the system framework layer is a program layer developed in the Object-C language.

[0142] In specific implementation, the instruction information can be transmitted from the client script layer to the system framework layer in real time. However, since this method requires rendering processing of the system framework layer for each intercepted instruction, this processing method has the problem of reducing system performance.

[0143] In order to avoid negative impact on system performance, as a preferred solution, this step can be implemented in the following manner: according to a preset time interval, the instruction information is transmitted from the client script layer to the system framework layer. In this way, a certain image frame rate can be guaranteed to meet the user's visual experience, while avoiding degradation of system performance.

[0144] In addition, in order to transmit the instruction information from the client script layer to the system framework layer, the following technology may be used: the instruction information is transmitted to the system framework layer through a JS bridge or a JavaScript engine.

[0145] Through the JS bridge or JavaScript engine, the interaction between JavaScript code and system framework layer code can be realized, so that instruction information is transmitted from the client script layer to the system framework layer.

[0146] If the JS bridge method is used to transmit information, a more mature solution such as cordova can be applied. If the JavaScript engine method is used to transmit information, when the method of this application is applied in the Android system, the V8 engine can be used; when the method of this application is applied in the iOS system, the JavaScriptCore engine can be used.

[0147] It should be noted that if the JS bridge solution is used, then for the selected JS bridge, it is also necessary to implement an adapter plug-in of the JS bridge in the system framework layer. The adapter plug-in is used to receive interaction instructions or rendering instructions (i.e., instruction information) passed by the JS bridge to the system framework layer, and process or forward them as needed.

[0148] It should be noted that the method provided in this application fully eliminates the dependence on the operating system by introducing the JavaScript bridge layer and the system framework layer, is compatible with the existing mobile operating systems, and has strong compatibility, thereby achieving a cross-platform technical effect.

[0149] When the instruction information carried by the WebGL drawing instruction is transmitted to the system framework layer, the next step may be entered to generate an OpenGL drawing instruction corresponding to the WebGL drawing instruction according to the instruction information.

[0150] Step S105: generating an OpenGL drawing instruction corresponding to the WebGL drawing instruction according to the instruction information.

[0151] This step generates an OpenGL drawing instruction corresponding to the WebGL drawing instruction according to the received instruction information. Through the processing of this step and the above steps, the original WebGL drawing instruction can be finally converted into the corresponding OpenGL drawing instruction.

[0152] It should be noted that this step and the next step can be directly implemented in the system framework layer. For example, the Android system framework layer provides two classes for application development to support the 3D graphics API OpenGL ES, namely GLSurfaceView and GLSurfaceView.Renderer. Through these two interface classes, 3D graphics can be developed based on OpenGL ES. However, this implementation method has the problem of low rendering efficiency.

[0153] As a preferred solution, this step and the next step can be implemented in the system local layer (such as: Android system NDK, Native Development Kit). The system local layer is also called the C++ engine layer. This method is similar to the above method. Taking the Android system as an example, the main difference between this method and the above method is: the implementation part of GLSurfaceView.Renderer is implemented locally, and then the communication between the Java end and the C end is realized through JNI.

[0154] In this embodiment, this step and the next step are implemented in the system local layer. To this end, this step first transmits the instruction information from the system framework layer to the system local layer, and then generates the OpenGL drawing instruction in the system local layer according to the instruction information. By generating and executing the OpenGL drawing instruction in the system local layer, a higher rendering performance can be obtained.

[0155] In specific implementation, this step S105 can be implemented in the following manner: generating the OpenGL drawing instruction according to the second preset instruction conversion rule and the instruction information.

[0156] The second preset instruction conversion rule is related to the above-mentioned first preset instruction conversion rule. According to the first preset instruction conversion rule, the WebGL drawing instruction is converted into a rendering command; according to the second preset instruction, the instruction information in the form of the rendering command is converted into an OpenGL drawing instruction corresponding to the WebGL drawing instruction.

[0157] For example, the WebGL drawing instruction is converted into a rendering command "B, 1" at the client script layer, and after being passed to the system native layer (C++ engine layer) through the system framework layer, it will be processed by the following code:

[0158]

[0159] After being processed by the above code, "1" is converted to the enumeration value "kEJCompositeOperationSourceOver", and then continues to be processed in the SetGlobalCompositeOperation method. The method code is as follows:

[0160]

[0161]

[0162] After parsing the above code, "glBlendFunc" is obtained, which is the OpenGL drawing instruction that actually corresponds to the WebGL drawing instruction.

[0163] After generating the OpenGL drawing instructions corresponding to the WebGL drawing instructions, the next step may be entered to draw the 3D canvas web page element according to these OpenGL drawing instructions.

[0164] Step S107: drawing the OpenGL drawing instruction to the OpenGL rendering window of the system to form a rendering result of the 3Dcanvas web page element.

[0165] This step draws the OpenGL drawing instructions generated in the previous step into the OpenGL rendering window of the system to form the rendering result of the 3D canvas web page element.

[0166] Drawing OpenGL drawing instructions to the OpenGL rendering window of the system is a common technology in the technical field, and this application does not limit the specific drawing method. An optional specific implementation method is given below.

[0167] In specific implementation, this step may include the following steps: 1) obtaining context information and rendering target corresponding to the 3D canvas web page element; 2) performing graphics rendering on the rendering target according to the context information and the OpenGL drawing instructions; 3) inputting the rendering target into the system's off-screen buffer.

[0168] 1) Obtaining context information and rendering target corresponding to the 3D canvas web page element.

[0169] To realize the processing of drawing OpenGL drawing instructions to the system's OpenGL rendering window, the system local layer needs to have the following functions: 1) Create, manage, and destroy 3D canvas entities and 3D canvas context entities, where the context entity stores the context information of the canvas element, and the canvas entity stores the attribute information of the canvas element; 2) Be responsible for managing the rendering of different canvas elements to the rendering targets of multiple rendering layers; 3) Synthesize multiple rendering targets into the off-screen rendering buffer through the FBO technology in OpenGL.

[0170] In simple terms, a rendering target is a surface on which a graphics API can "draw" things. In essence, a rendering target is a continuous memory area, and multiple such memory areas can exist simultaneously, that is, multiple rendering targets. In this embodiment, different 3D canvas web page elements correspond to different rendering targets.

[0171] The context information and the rendering target are generated when the 3D canvas webpage element is drawn for the first time. Therefore, before obtaining the context information and the rendering target corresponding to the 3D canvas element, it also includes: determining whether the context information and the rendering target exist; if not, it is necessary to create the context information and the rendering target, and bind the context information and the rendering target. By binding the newly created context information and the rendering target, the 3D canvas element, the context information and the rendering target are associated.

[0172] 2) Performing graphics rendering on the rendering target according to the context information and the OpenGL drawing instruction.

[0173] After obtaining the context information and rendering target corresponding to the 3D canvas web page element, this step performs graphics rendering on the rendering target according to the context information and the OpenGL drawing instructions generated in step S105 to form a rendering result of the 3D canvas web page element.

[0174] In specific implementation, the canvas context entity calls the API corresponding to the renderer according to the generated OpenGL drawing instructions, and the renderer calls the corresponding OpenGL ES API and renders the result to the rendering target.

[0175] 3) Input the rendering target into the off-screen buffer of the system.

[0176] In OpenGL, there are two ways of GPU screen rendering: 1) On-Screen Rendering; 2) Off-Screen Rendering. On-Screen Rendering means that the GPU performs rendering operations in the screen buffer currently used for display; Off-Screen Rendering means that the GPU opens a new buffer outside the current screen buffer for rendering operations.

[0177] Since the rendering result of the 3D canvas web page element needs to be integrated into the system Webview window eventually, this step adopts an off-screen rendering method to input the rendered rendering target into the system's off-screen buffer.

[0178] It should be noted that if the web page where the 3D canvas web page element is located includes multiple 3D canvas web page elements, the input of the rendering target into the off-screen buffer of the system can be carried out in the following manner: the multiple rendering targets are synthesized into the off-screen buffer through FBO (FrameBuffer Object) technology; in this case, different rendering targets correspond to different 3D canvas web page elements, and the off-screen buffer includes synthetic rendering effect data that integrates the rendering effects of multiple 3D canvas web page elements.

[0179] The specific implementation of the above steps 1, 2 and 3 in this embodiment is as follows: for the canvas of the 3D canvas web page element and the corresponding webgl context, two corresponding classes "GCanvas" and "GCanvasContext" will be created inside GCanvas to correspond to them; according to the context information, the FBO technology will be used to draw the corresponding graphics to the texture specified by the FBO, and finally rendered to the screen by the system's EGL swap buffer mechanism.

[0180] After the rendering effect of the 3D canvas web page element is input into the off-screen buffer of the system through the above steps 1, 2 and 3, in the specific implementation, it is also necessary to copy the data of the off-screen buffer to the OpenGL rendering window of the system framework layer (such as: GlSurfaceView of the Android system), so that the system framework layer can synthesize the OpenGL rendering window and the system's Webview window to form the overall rendering effect of the web page where the 3D canvas web page element is located.

[0181] In a specific implementation, the OpenGL rendering window and the Webview window can be mixed through the window management mechanism of the system, wherein the non-3D canvas web page elements in the web page are drawn in the Webview window.

[0182] In this embodiment, WebView and GCanvasView (inherited from GLSurfaceView) are added to the ViewGroup of the original element through the HybridViewController class (inherited from ViewController). Part of the source code is as follows:

[0183]

[0184]

[0185] To sum up, the traditional method uses WebView to render 3D canvas web page elements, while the method provided in this application first renders the animation content of the 3D canvas web page elements in the system's OpenGL rendering window, and then merges the OpenGL rendering window and the WebView window to form the overall rendering effect of the web page.

[0186] Please refer to Figure 2 , which is a schematic diagram of the structure of the embodiment of the rendering method of the 3D canvas web page element of the present application. In this embodiment, the rendering method of the 3D canvas web page element of the present application has a four-layer structure, namely: JavaScript hosting module layer, bridge module layer, operating system adaptation module layer, and engine module layer. These layers are briefly described below.

[0187] 1) JavaScript hosting module layer: mainly used to host HTML5 3D canvas APIs (WebGL drawing instructions) and implement this solution for these APIs. The functions of this layer include but are not limited to: canvas element replacement, rendering instruction splicing and transmission, interactive instruction response, callback function response, canvas element size and position calculation, multiple canvas layer management, etc.

[0188] 2) Bridge module layer: mainly used for JavaScript to interact with the operating system layer (ie: the above-mentioned system framework layer) code (android: Java / iOS: OC). There are two solutions to achieve interaction between JavaScript and the underlying code, namely: JS bridge and JS engine.

[0189] 3) Operating system adaptation module layer: mainly used to implement a custom rendering window (i.e. the above-mentioned OpenGL rendering window), which is used to display the rendering output results of the HTML5 3D canvas; and to manage multiple windows (custom rendering windows and rendering windows of other HTML5 elements) to synthesize the final rendering results. If the JS bridge solution is used in the upper layer (bridge module layer), then for the selected JS bridge, it is also necessary to implement the JSbridge adaptation plug-in to receive the interaction or rendering instructions passed by the JS bridge to the system layer, and process or forward them as needed.

[0190] 4) Engine module layer: This is the system local layer mentioned above, which is mainly used to create, manage, and destroy canvas entities and canvas 3d context entities, and call the corresponding OpenGL ES API according to the received rendering instructions. This layer is also responsible for managing the rendering of different canvases to the render targets of multiple render layers, and finally synthesizing multiple render targets into the off-screen rendering buffer through the FBO technology in OpenGL.

[0191] Please refer to Figure 3 , which is a specific flow chart of an embodiment of a method for rendering a 3D canvas web page element of the present application. Figure 3 The flowchart shown corresponds to the specific processing process of the above solution, combined with Figure 3 The processing of the above solution can be understood more intuitively. Figure 2 right Figure 3 The specific flow chart shown is briefly described.

[0192] 1) JavaScript managed module layer

[0193] Find out whether there is a 3D canvas element that can be replaced in the HTML5 page. If there is and it can be successfully replaced, create a new custom DOM element and insert it into the original DOM tree, and delete the original canvas element. All subsequent calls and operations on the original canvas element will be managed by the newly inserted DOM element. After receiving the call of the 3D canvas, convert the API call into a set of commands implemented internally and pass it to the system adaptation layer through a timer.

[0194] 2) Bridge module layer

[0195] Responsible for passing the commands generated by the JavaScript managed module layer to the system adaptation layer.

[0196] 3) Operating system adaptation module layer

[0197] After receiving the command, assemble the view used to render the 3D canvas and the views of other HTML5 elements, and pass the command to the engine module layer.

[0198] 4) Engine module layer

[0199] After receiving the command, it is parsed and the corresponding 3D canvas context is obtained (if it does not exist, a new one is created); the compositor obtains a rendering target (if it does not exist, a new one is created) and assigns it to the 3D canvas context; the 3D canvas context calls the corresponding API of the renderer according to the parsed command result, and the renderer calls the corresponding OpenGL ES API and renders the result to the rendering target; the compositor synthesizes multiple rendering targets through FBO technology and inputs them into the system's off-screen buffer.

[0200] At this point, the main tasks of the rendering method of the 3D canvas web page element provided in this application are completed, the operating system will obtain rendering control and display the rendering results on the screen.

[0201] In the above embodiment, a method for rendering a 3D canvas web page element is provided, and correspondingly, the present application also provides a device for rendering a 3D canvas web page element. The device corresponds to the embodiment of the above method.

[0202] Please see Figure 4 , which is a schematic diagram of an embodiment of a rendering device for a 3D canvas web page element of the present application. Since the device embodiment is basically similar to the method embodiment, the description is relatively simple, and the relevant parts can be referred to the partial description of the method embodiment. The device embodiment described below is only illustrative.

[0203] A rendering device for a 3D canvas web page element in this embodiment includes: a WebGL instruction interception unit 101, used to intercept WebGL drawing instructions for 3D canvas web page elements; a WebGL instruction transmission unit 103, used to transmit instruction information carried by the WebGL drawing instructions to the system framework layer; an OpenGL instruction generation unit 105, used to generate an OpenGL drawing instruction corresponding to the WebGL drawing instruction according to the instruction information; and an OpenGL instruction drawing unit 107, used to draw the OpenGL drawing instruction to the OpenGL rendering window of the system to form a rendering result of the 3D canvas web page element.

[0204] Optionally, the WebGL instruction interception unit 101 is specifically configured to intercept the WebGL drawing instruction by replacing the DOM object of the 3D canvas web page element.

[0205] Optionally, the WebGL instruction transmission unit 103 includes:

[0206] An instruction information extraction subunit, used to extract the instruction information from the WebGL drawing instruction;

[0207] A rendering command generating subunit, configured to generate a rendering command corresponding to the WebGL drawing instruction according to a first preset instruction conversion rule and the instruction information;

[0208] The rendering command transmitting subunit is used to transmit the rendering command to the system framework layer.

[0209] Optionally, the OpenGL instruction generation unit 105 includes:

[0210] An instruction information transmission subunit, used for transmitting the instruction information from the system framework layer to the system local layer;

[0211] The OpenGL instruction generation subunit is used to generate the OpenGL drawing instruction according to the instruction information in the system local layer.

[0212] Please refer to Figure 5 , which is a schematic diagram of an electronic device embodiment of the present application. Since the device embodiment is basically similar to the method embodiment, the description is relatively simple, and the relevant parts can be referred to the partial description of the method embodiment. The device embodiment described below is only illustrative.

[0213] An electronic device of the present embodiment includes: a display 101; a processor 102; and a memory 103, which is used to store a program for implementing a rendering method of a 3D canvas web page element. After the device is powered on and runs the program of the rendering method of the 3D canvas web page element through the processor, the following steps are performed: intercepting a WebGL drawing instruction for the 3D canvas web page element; transmitting instruction information carried by the WebGL drawing instruction to a system framework layer; generating an OpenGL drawing instruction corresponding to the WebGL drawing instruction according to the instruction information; and drawing the OpenGL drawing instruction to the system's OpenGL rendering window to form a rendering result of the 3D canvas web page element.

[0214] Corresponding to the above method, the present application also provides a method for rendering a 2D canvas web page element. The following first briefly describes the method for rendering a 2D canvas web page element in the prior art and the existing problems.

[0215] Under the existing technology, HTML5 2D canvas relies on the system Webview to complete rendering and drawing in mobile apps, and its performance depends on the system Webview. However, the performance of HTML5 canvas elements on mobile terminals is not good, especially on some highly interactive pages such as games and animations, the performance problem of canvas is more obvious, and the screen will appear stuck and respond slowly. Among them, due to the large number of Android system versions for Android phones, different support from various mobile phone manufacturers, and serious customization, the performance bottleneck of HTML5 canvas is particularly prominent on Android phones. In summary, the existing technology has the problem of low rendering performance of 2D canvas web page elements.

[0216] Please refer to Figure 6 , which is a flowchart of an embodiment of a method for rendering a 2D canvas web page element provided by the present application. The parts of this embodiment that are the same as those of the first embodiment are not repeated here. Please refer to the corresponding parts in the first embodiment. A method for rendering a 2D canvas web page element provided by the present application includes:

[0217] Step S101: intercepting a drawing instruction for a 2D canvas web page element.

[0218] This step corresponds to step S101 of the above-mentioned embodiment 1, and the difference between the two is that the processing object of the above-mentioned embodiment 1 is a 3D canvas web page element, while the processing object of this method is a 2D canvas web page element; accordingly, the above-mentioned embodiment 1 intercepts WebGL drawing instructions, while this method intercepts drawing instructions for 2D canvas.

[0219] The core idea and processing steps of the rendering method of the 2D canvas web page element provided in this application are completely consistent with those of the above-mentioned rendering method of the 3D canvas web page element. Therefore, this embodiment will not further describe each step in detail. For the corresponding part, please refer to the relevant description in the first embodiment, which will not be repeated here. The method embodiment described below is only illustrative.

[0220] As a preferred solution, this step may be performed in the following manner: by replacing the DOM object of the 2D canvas web page element, the drawing instruction of the 2D canvas web page element is intercepted.

[0221] Step S103: transmitting the instruction information carried by the drawing instruction of the 2D canvas web page element to the system framework layer.

[0222] As a preferred solution, this step may include the following specific steps: 1) extracting the instruction information from the drawing instruction of the 2D canvas web page element; 2) generating a rendering command corresponding to the drawing instruction of the 2D canvas web page element according to a first preset instruction conversion rule and the instruction information; 3) transmitting the rendering command to the system framework layer.

[0223] Step S105: Generate an OpenGL drawing instruction corresponding to the drawing instruction of the 2D canvas web page element according to the instruction information.

[0224] As a preferred solution, this step may include the following specific steps: 1) transmitting the instruction information from the system framework layer to the system local layer; 2) generating the OpenGL drawing instruction in the system local layer according to the instruction information.

[0225] Step S107: drawing the OpenGL drawing instruction to the OpenGL rendering window of the system to form a rendering result of the 2Dcanvas web page element.

[0226] As a preferred solution, this step may include the following specific steps: 1) obtaining the context information and rendering target corresponding to the 2D canvas web page element; 2) performing graphics rendering on the rendering target according to the context information and the OpenGL drawing instructions; 3) inputting the rendering target into the system's off-screen buffer.

[0227] In addition, the method provided by the present application also includes: synthesizing the OpenGL rendering window and the system's Webview window to form a rendering result of the web page where the 2D canvas web page element is located.

[0228] Please refer to Figure 7 , which is a schematic diagram of the structure of the embodiment of the rendering method of the 2D canvas web page element of the present application. In this embodiment, the rendering method of the 2D canvas web page element of the present application has a four-layer structure, namely: JavaScript hosting module layer, bridge module layer, operating system adaptation module layer, and engine module layer. These layers are briefly described below.

[0229] 1) JavaScript hosting module layer: mainly used to host HTML5 2D canvas APIs (drawing instructions) and implement this solution for these APIs. The functions of this layer include but are not limited to: canvas element replacement, rendering instruction splicing and transmission, interactive instruction response, callback function response, canvas element size and position calculation, multiple canvas layer management, etc.

[0230] 2) Bridge module layer: mainly used for JavaScript to interact with the operating system layer (ie: the above-mentioned system framework layer) code (android: Java / iOS: OC). There are two solutions to achieve interaction between JavaScript and the underlying code, namely: JS bridge and JS engine.

[0231] 3) Operating system adaptation module layer: mainly used to implement a custom rendering window (i.e. the above-mentioned OpenGL rendering window), which is used to display the rendering output results of the HTML5 2D canvas; and to manage multiple windows (custom rendering windows and rendering windows of other HTML5 elements) to synthesize the final rendering results. If the JS bridge solution is used in the previous layer (bridge module layer), then for the selected JS bridge, it is also necessary to implement the JSbridge adaptation plug-in to receive the interaction or rendering instructions passed by the JS bridge to the system layer, and process or forward them as needed.

[0232] 4) Engine module layer: This is the system local layer mentioned above, which is mainly used to create, manage, and destroy canvas entities and canvas 2d context entities, and call the corresponding OpenGL ES API according to the received rendering instructions. This layer is also responsible for managing the rendering of different canvases to the render targets of multiple render layers, and finally synthesizing multiple render targets into the off-screen rendering buffer through the FBO technology in OpenGL.

[0233] Please refer to Figure 8 , which is a specific flow chart of an embodiment of a method for rendering a 2D canvas web page element of the present application. Figure 8 The flowchart shown corresponds to the specific processing process of the above solution, combined with Figure 8 The processing of the above solution can be understood more intuitively. Figure 7 right Figure 8 The specific flow chart shown is briefly described.

[0234] 1) JavaScript managed module layer

[0235] Find out whether there is a 2D canvas element that can be replaced in the HTML5 page. If there is and it can be successfully replaced, create a new custom DOM element and insert it into the original DOM tree, and delete the original canvas element. All subsequent calls and operations on the original canvas element will be managed by the newly inserted DOM element. After receiving the call of 2D canvas, convert the API call into a set of commands implemented internally and pass it to the system adaptation layer through a timer.

[0236] 2) Bridge module layer

[0237] Responsible for passing the commands generated by the JavaScript managed module layer to the system adaptation layer.

[0238] 3) Operating system adaptation module layer

[0239] After receiving the command, assemble the view used to render the 2D canvas and the views of other HTML5 elements, and pass the command to the engine module layer.

[0240] 4) Engine module layer

[0241] After receiving the command, it is parsed and the corresponding 2D canvas context is obtained (if it does not exist, a new one is created); the compositor obtains a rendering target (if it does not exist, a new one is created) and assigns it to the 2D canvas context; the 2D canvas context calls the corresponding API of the renderer according to the parsed command result, and the renderer calls the corresponding OpenGL ES API and renders the result to the rendering target; the compositor synthesizes multiple rendering targets through FBO technology and inputs them into the system's off-screen buffer.

[0242] At this point, the main tasks of the rendering method of the 2D canvas web page element provided in this application are completed, the operating system will obtain rendering control and display the rendering results on the screen.

[0243] In the above embodiment, a method for rendering a 2D canvas web page element is provided, and correspondingly, the present application also provides a device for rendering a 2D canvas web page element. The device corresponds to the embodiment of the above method.

[0244] Please see Fig. 9 , which is a schematic diagram of an embodiment of a rendering device for a 2D canvas web page element of the present application. Since the device embodiment is basically similar to the method embodiment, the description is relatively simple, and the relevant parts can be referred to the partial description of the method embodiment. The device embodiment described below is only illustrative.

[0245] A rendering device for a 2D canvas web page element in this embodiment includes: an instruction interception unit 101, used to intercept drawing instructions for 2D canvas web page elements; an instruction transmission unit 103, used to transmit instruction information carried by the drawing instructions of the 2D canvas web page elements to the system framework layer; an OpenGL instruction generation unit 105, used to generate OpenGL drawing instructions corresponding to the drawing instructions of the 2D canvas web page elements according to the instruction information; and an OpenGL instruction drawing unit 107, used to draw the OpenGL drawing instructions to the OpenGL rendering window of the system to form a rendering result of the 2D canvas web page element.

[0246] Optionally, the instruction interception unit 101 is specifically configured to intercept the drawing instruction of the 2D canvas web page element by replacing the DOM object of the 2D canvas web page element.

[0247] Optionally, the instruction transmission unit 103 includes:

[0248] An instruction information extraction subunit, used to extract the instruction information from the drawing instruction of the 2D canvas web page element;

[0249] A rendering command generating subunit, configured to generate a rendering command corresponding to the drawing instruction of the 2Dcanvas webpage element according to a first preset instruction conversion rule and the instruction information;

[0250] The rendering command transmitting subunit is used to transmit the rendering command to the system framework layer.

[0251] Optionally, the OpenGL instruction generation unit 105 includes:

[0252] An instruction information transmission subunit, used for transmitting the instruction information from the system framework layer to the system local layer;

[0253] The OpenGL instruction generation subunit is used to generate the OpenGL drawing instruction according to the instruction information in the system local layer.

[0254] Please refer to Fig.10 , which is a schematic diagram of an electronic device embodiment of the present application. Since the device embodiment is basically similar to the method embodiment, the description is relatively simple, and the relevant parts can be referred to the partial description of the method embodiment. The device embodiment described below is only illustrative.

[0255] An electronic device of this embodiment includes: a display 1101; a processor 1102; and a memory 1103, which is used to store a program for implementing a rendering method of a 2D canvas web page element. After the device is powered on and runs the program of the rendering method of the 2D canvas web page element through the processor, the following steps are performed: intercepting a drawing instruction for the 2D canvas web page element; transmitting instruction information carried by the drawing instruction of the 2D canvas web page element to a system framework layer; generating an OpenGL drawing instruction corresponding to the drawing instruction of the 2D canvas web page element according to the instruction information; and drawing the OpenGL drawing instruction to the system's OpenGL rendering window to form a rendering result of the 2D canvas web page element.

[0256] The rendering method, device and electronic device of the 2D canvas web page element provided by the present application intercepts the drawing instructions of the 2D canvas web page element at the mobile App level, transmits the instruction information carried by the drawing instructions of the 2D canvas web page element to the system framework layer, and then generates the OpenGL drawing instructions corresponding to the drawing instructions of the 2D canvas web page element according to the instruction information; and draws the OpenGL drawing instructions to the OpenGL rendering window of the system to form the rendering result of the 2D canvas web page element. The method provided by the present application can avoid rendering and drawing the 2D canvas web page element through the system Webview, thereby achieving the effect of improving the rendering performance.

[0257] Although the present application is disclosed as above in the form of a preferred embodiment, it is not intended to limit the present application. Any technical personnel in this field may make possible changes and modifications without departing from the spirit and scope of the present application. Therefore, the scope of protection of the present application shall be based on the scope defined by the claims of the present application.

[0258] In a typical configuration, a computing device includes one or more processors (CPU), input / output interfaces, network interfaces, and memory.

[0259] The memory may include non-permanent storage in a computer-readable medium, random access memory (RAM) and / or non-volatile memory in the form of read-only memory (ROM) or flash RAM. The memory is an example of a computer-readable medium.

[0260] 1. Computer-readable media includes permanent and non-permanent, removable and non-removable media that can be used to store information by any method or technology. Information can be computer-readable instructions, data structures, program modules or other data. Examples of computer storage media include, but are not limited to, phase change memory (PRAM), static random access memory (SRAM), dynamic random access memory (DRAM), other types of random access memory (RAM), read-only memory (ROM), electrically erasable programmable read-only memory (EEPROM), flash memory or other memory technology, compact disk read-only memory (CD-ROM), digital versatile disk (DVD) or other optical storage, magnetic cassettes, magnetic tape magnetic disk storage or other magnetic storage devices or any other non-transmission media that can be used to store information that can be accessed by a computing device. As defined herein, computer-readable media does not include non-transitory media such as modulated data signals and carrier waves.

[0261] 2. Those skilled in the art should understand that the embodiments of the present application can be provided as methods, systems or computer program products. Therefore, the present application can take the form of a complete hardware embodiment, a complete software embodiment or an embodiment combining software and hardware. Moreover, the present application can take the form of a computer program product implemented on one or more computer-usable storage media (including but not limited to disk storage, CD-ROM, optical storage, etc.) containing computer-usable program code.

Claims

1. A method for rendering a 2D canvas web page element, characterized in that: include: Intercept drawing instructions for 2D canvas web page elements from the client script layer; Transmitting the instruction information carried by the drawing instruction of the 2D canvas web page element to the system framework layer; Generate an OpenGL drawing instruction corresponding to the drawing instruction of the 2D canvas web page element according to the instruction information; The OpenGL drawing instructions are drawn to the OpenGL rendering window of the system to form a rendering result of the 2Dcanvas web page element.

2. The method for rendering a 2D canvas web page element according to claim 1, characterized in that: The WebGL drawing instructions for the 2Dcanvas web page element are intercepted in the following manner: By replacing the DOM object of the 2D canvas web page element, the drawing instruction of the 2D canvas web page element is intercepted.

3. The method for rendering a 2D canvas web page element according to claim 1, characterized in that: The step of transmitting the instruction information carried by the drawing instruction for the 2D canvas webpage element to the system framework layer includes: Extracting the instruction information from the drawing instruction of the 2D canvas web page element; Generate a rendering command corresponding to the drawing instruction of the 2D canvas webpage element according to the first preset instruction conversion rule and the instruction information; The rendering command is transmitted to the system framework layer.

4. The method for rendering a 2D canvas web page element according to claim 1, characterized in that: The generating of the OpenGL drawing instruction corresponding to the drawing instruction of the 2D canvas webpage element comprises: Transmitting the instruction information from the system framework layer to the system local layer; In the system local layer, the OpenGL drawing instruction is generated according to the instruction information.

5. The method for rendering a 2D canvas web page element according to claim 4, characterized in that: Drawing the OpenGL drawing instruction to the OpenGL rendering window of the system includes: Obtaining context information and rendering targets corresponding to the 2D canvas web page element; Performing graphics rendering on the rendering target according to the context information and the OpenGL drawing instruction; The render target is input into the system's off-screen buffer.

6. The method for rendering a 2D canvas web page element according to claim 1, characterized in that: Also includes: The OpenGL rendering window and the system's Webview window are synthesized to form a rendering result of the web page where the 2Dcanvas web page element is located.

7. A rendering device for a 2D canvas web page element, characterized in that: include: An instruction interception unit is used to intercept drawing instructions for 2D canvas web page elements from the client script layer; An instruction transmission unit, used for transmitting the instruction information carried by the drawing instruction of the 2D canvas web page element to the system framework layer; An OpenGL instruction generating unit, configured to generate an OpenGL drawing instruction corresponding to the drawing instruction of the 2D canvas webpage element according to the instruction information; The OpenGL instruction drawing unit is used to draw the OpenGL drawing instruction to the OpenGL rendering window of the system to form the rendering result of the 2D canvas web page element.

8. The rendering device of 2D canvas web page element according to claim 7, characterized in that: The instruction interception unit is specifically used to intercept the drawing instruction of the 2D canvas web page element by replacing the DOM object of the 2D canvas web page element.

9. The rendering device of 2D canvas web page element according to claim 7, characterized in that: The instruction transmission unit comprises: An instruction information extraction subunit, used to extract the instruction information from the drawing instruction of the 2D canvas web page element; A rendering command generating subunit, configured to generate a rendering command corresponding to a drawing instruction of the 2D canvas webpage element according to a first preset instruction conversion rule and the instruction information; A rendering command transmission subunit, used for transmitting the rendering command to the system framework layer; The OpenGL instruction generation unit comprises: An instruction information transmission subunit, used for transmitting the instruction information from the system framework layer to the system local layer; The OpenGL instruction generation subunit is used to generate the OpenGL drawing instruction according to the instruction information in the system local layer.

10. An electronic device, characterized in that: include: monitor; processor; as well as The memory is used to store a program for implementing a rendering method of a 2D canvas web page element. After the device is powered on and runs the program of the rendering method of the 2D canvas web page element through the processor, the following steps are performed: intercepting a drawing instruction for the 2D canvas web page element from a client script layer; transmitting instruction information carried by the drawing instruction of the 2D canvas web page element to a system framework layer; generating an OpenGL drawing instruction corresponding to the drawing instruction of the 2D canvas web page element according to the instruction information; and drawing the OpenGL drawing instruction to the OpenGL rendering window of the system to form a rendering result of the 2D canvas web page element.

Images