Canvas drawing method, display device and computer readable storage medium

Abstract

The invention discloses a canvas drawing method, a display device and a computer readable storage medium, the display device comprises a video controller, the canvas drawing method comprises the steps that the video controller displays a container on an interface of a webpage end and sets initial size information of the container and drawing logic of a canvas, and the container is used for containing canvas elements of the canvas; the video controller overlays canvas elements on the container based on the initial size information and drawing logic, and performs drawing based on the canvas elements; in response to container scaling processing information received by the video controller, scaling processing is performed on the container, and target size information of the scaled container is acquired; the video controller overlays the container with canvas elements based on the target size information and the drawing logic, and draws based on the canvas elements. According to the method and the device, one-time drawing is carried out on the basis of the size information of the container subjected to the zooming processing after each zooming processing, so that the container subjected to the zooming processing is consistent with a drawn picture in size, and the drawing quality can be improved.

Description

Technical Field

[0001] This application relates to the field of display technologies, and particularly to a canvas drawing method, a display device, and a computer-readable storage medium. Background Art

[0002] Currently, Web frame-by-frame animations usually draw different contents frame by frame on each frame of the timeline, and then use Web (IMG, Canvas, CSS3) to display each frame of the picture in sequence to make it play continuously to form an animation.

[0003] During the drawing process, affected by the refresh rate of the display screen, the picture is easily restricted by scaling. For example, when playing an animation using a browser, the refresh frequency of the browser usually remains the same as the refresh rate of the display screen. The browser takes positions frame by frame and plays the pictures corresponding to each frame in sequence based on the brush frequency. If the scaling speed is too fast, it will cause jitter during the animation playback, affecting the quality of the animation execution. Summary of the Invention

[0004] To solve the above problems, this application provides a canvas drawing method, a display device, and a computer-readable storage medium.

[0005] To solve the above technical problems, this application provides a first technical solution, which provides a canvas drawing method applied to a display device. The display device includes a video controller. The canvas drawing method includes: the video controller displays a container on the interface of the web page end, sets the initial size information of the container, and the drawing logic of the canvas. The container is used to accommodate the canvas element of the canvas; the video controller fills the container with the canvas element based on the initial size information and the drawing logic, and performs drawing based on the canvas element; in response to the video controller receiving the scaling processing information for the container, performs scaling processing on the container to obtain the target size information of the scaled container; the video controller fills the container with the canvas element based on the target size information and the drawing logic, and performs drawing based on the canvas element.

[0006] Among them, the step of obtaining the target size information of the scaled container in response to performing scaling processing on the container includes: adding event elements to the edge area of the container, and binding scaling events to the event elements; in response to detecting the scaling event, performing scaling processing on the container; based on the scaled container, obtaining the target size information of the container.

[0007] Among them, the step of adding event elements to the edge area of the container and binding scaling events to the event elements includes: adding event elements to the four edge areas of the container respectively, and each event element coincides with the corresponding edge area of the container.

[0008] Among them, the steps of scaling the container in response to detecting a scaling event include: in response to detecting a scaling event, moving the event element; obtaining the size change information of the container based on the position of the event element and the position of the container; and scaling the container based on the size change information of the container.

[0009] Among them, the steps of filling the canvas element to cover the container based on the target size information and the drawing logic, and performing drawing based on the canvas element include: binding an event trigger function to the container; in response to detecting a scaling event, triggering the event trigger function, where the event trigger function is used to trigger the canvas element to cover the container and perform drawing based on the canvas element.

[0010] Among them, the drawing logic includes the drawing logic of multiple frames of images and the display order relationship between multiple frames of images. The steps of filling the canvas element to cover the container based on the initial size information and the drawing logic, and performing drawing based on the canvas element include: covering the container with the canvas element based on the initial size information; and sequentially drawing multiple frames of images based on the canvas element according to the display order relationship.

[0011] Among them, the steps of sequentially drawing multiple frames of images based on the canvas element according to the display order relationship include: obtaining the drawing frequency of multiple frames of images; and drawing multiple frames of images based on the drawing frequency and the drawing logic.

[0012] Among them, the steps of drawing multiple frames of images based on the drawing frequency and the drawing logic include: obtaining the scaling frequency of the container based on the scaled container; in response to the scaling frequency being greater than the drawing frequency, stopping drawing the current frame; covering the container with the canvas element, obtaining the drawing logic of the current frame, and performing drawing based on the canvas element and the drawing logic of the current frame.

[0013] To solve the above technical problems, another technical solution provided by this application is: providing a display device, the display device includes a video controller and a memory connected to the video controller, where the memory is used to store a computer program, and the video controller is used to execute the computer program to implement the canvas drawing method as described above.

[0014] To solve the above technical problems, another technical solution provided by this application is: providing a computer-readable storage medium, the computer-readable storage medium stores a computer program, and the computer program is used to implement the canvas drawing method as described above when executed by a video controller.

[0015] The present application provides a method for canvas drawing, including: a video controller displays a container on the interface of a web page, sets the initial size information of the container, and the drawing logic of the canvas. The container is used to accommodate the canvas element; the video controller fills the container with the canvas element based on the initial size information and the drawing logic, and performs drawing based on the canvas element; in response to the video controller receiving information on scaling processing of the container, the video controller performs scaling processing on the container to obtain the target size information of the scaled container; the video controller fills the container with the canvas element based on the target size information and the drawing logic, and performs drawing based on the canvas element. Based on the above method, each time after scaling processing, drawing is performed once based on the size information of the scaled container, so that the size of the scaled container and the drawn image are kept consistent, that is, no matter whether the container changes quickly or slowly, drawing is performed immediately once, which can reduce the impact of rapid scaling of the container, reduce the jitter effect, and improve the drawing quality. At the same time, the present application performs drawing once after each scaling processing, which is not limited by the refresh frequency of the display component, and thus can reduce the requirements for the video controller, that is, it can be compatible with low-version video controllers and reduce the cost of the display device. Description of the Drawings

[0016] The drawings described herein are used to provide a further understanding of the present application and form a part of the present application. The illustrative embodiments of the present application and their descriptions are used to explain the present application and do not constitute an improper limitation to the present application. In the drawings:

[0017] Figure 1 is a schematic flowchart of an embodiment of the canvas drawing method provided by the present application;

[0018] Figure 2 is a schematic flowchart of another embodiment of the canvas drawing method provided by the present application;

[0019] Figure 3 is a schematic flowchart of still another embodiment of the canvas drawing method provided by the present application;

[0020] Figure 4 is Figure 1 a schematic diagram of the container in the initial state on the interface of the web page in

[0021] Figure 5 is Figure 1 a schematic diagram of the container after scaling processing on the interface of the web page in

[0022] Figure 6 is a schematic framework diagram of an embodiment of the display device provided by the present application;

[0023] Figure 7 is a schematic structural diagram of an embodiment of the computer-readable storage medium provided by the present application. Detailed Embodiments

[0024] To make the above objects, features, and advantages of the present invention more apparent and understandable, the following will describe in detail the specific embodiments of the present invention with reference to the accompanying drawings. It can be understood that the specific embodiments described herein are only used to explain the present invention, rather than limiting the present invention. Additionally, it should be noted that for the convenience of description, only the parts related to the present invention rather than all the structures are shown in the drawings. Based on the embodiments of the present invention, all other embodiments obtained by those of ordinary skill in the art without creative efforts fall within the scope of protection of the present invention.

[0025] The terms "first", "second", etc. in the present invention are used to distinguish different objects, rather than to describe a specific order. In addition, the terms "comprising" and "having" and any variations thereof are intended to cover non-exclusive inclusion. For example, a process, method, system, product, or device that includes a series of steps or units is not limited to the listed steps or units, but optionally further includes steps or units not listed, or optionally further includes other steps or units inherent to these processes, methods, products, or devices.

[0026] Referring to "embodiments" herein means that the specific features, structures, or characteristics described in connection with the embodiments can be included in at least one embodiment of the present invention. The appearance of this phrase at various positions in the specification does not necessarily refer to the same embodiment, nor is it an independent or alternative embodiment mutually exclusive with other embodiments. Those skilled in the art explicitly and implicitly understand that the embodiments described herein can be combined with other embodiments.

[0027] During the drawing process, affected by the refresh rate of the display screen, the picture is easily restricted by scaling. For example, when using a browser to play an animation, the refresh frequency of the browser usually remains consistent with the refresh rate of the display screen. The browser fetches bits frame by frame and plays the corresponding picture of each frame in sequence based on the refresh frequency. If the scaling speed is too fast, it will cause jitter during the animation playback, affecting the quality of the animation execution.

[0028] Based on the above problems, the present application provides a canvas drawing method. By performing a drawing once based on the size information of the container after each scaling process, the size of the container after scaling and the drawn picture are made consistent. Compared with the prior art of drawing based on the refresh frequency of the browser, it can reduce the impact of rapid scaling of the container, reduce the jitter effect, and improve the drawing quality. The following will clearly and completely describe the technical solutions in the embodiments of the present application with reference to the accompanying drawings in the embodiments of the present application.

[0029] Please refer to Figure 1 , Figure 1FIG. 0 is a schematic flowchart of an embodiment of a canvas drawing method provided by the present application. The canvas drawing method of this embodiment is applied to a display device, which can be a server, a computer, a tablet, etc. The display device includes a display component for displaying the drawn picture. The canvas drawing method of this embodiment can be applied to a Web (World Wide Web) browser to sequentially display each frame of the picture, such as IMG (Image), Canvas, or CSS (Cascading Style Sheets) of the Web browser. In this embodiment, Canvas is taken as an example for illustration.

[0030] The canvas drawing method of this embodiment includes the following steps:

[0031] S101: The video controller displays a container on the interface of the web page, sets the initial size information of the container, and the drawing logic of the canvas. The container is used to hold the canvas element of the canvas.

[0032] Among them, the video controller is used to generate image information on the display interface of the display device. For example, the video controller displays a container on the interface of the web page. Among them, the canvas can include multiple elements, and the container is used to hold multiple elements of the canvas. Among them, some elements can be bound with events. An event is something that happens to an element and can be something done by the user or the browser. For example, events include mouse events, keyboard events, touch events, form events, and page load completed events. For example, mouse events include mouse click, mouse double click, mouse press event, mouse move event, and mouse button release event, etc.

[0033] The container is used for element rendering, event management, and event triggering. When rendering the canvas, the browser executes the drawing logic, constructs the canvas in memory, and then traverses the colors of all pixel points in the entire canvas and outputs them to the display component. Within the scope of the container, elements can be added and bound with events, and when an event is monitored to occur, the event is triggered.

[0034] Among them, the drawing logic of the canvas includes the drawing logic of multiple frames of pictures and the display sequence relationship between multiple frames of pictures. Taking one frame of picture as an example, the drawing logic of the picture is the drawing script of the picture. Based on the display sequence relationship between multiple frames of pictures, multiple frames of pictures are sorted so that they are continuously played to form an animation.

[0035] Among them, the drawing script can be JavaScript. When using JavaScript in an HTML (HyperText Markup Language) page, JavaScript allows code to be executed when an event is monitored. Through JavaScript code, a user can add event handlers to elements of the HTML page. The drawing of the screen is performed through the drawing script.

[0036] The canvas element of the canvas can be a Canvas element. The drawing of the screen is performed on the canvas element through the drawing script. During the drawing process, the size of the canvas element changes, and the coordinate values of the key points in the drawing script are the relative percentages of the points on the canvas element. The drawing of the screen is based on the size of the canvas element.

[0037] For example, taking the drawing of a line segment as an example, the drawing script includes the starting coordinate and the ending coordinate of the line segment. The starting coordinate of the line segment is (0.5, 0.5), and the ending coordinate of the line segment is (0.6, 0.5). Set the first direction as the horizontal direction of the display component, and the second direction as the direction perpendicular to the horizontal direction. If the size of the canvas element is 100 * 100 pixels, with the upper left endpoint of the canvas as the origin, the positive x-axis direction to the right in the first direction, and the positive y-axis direction downward in the second direction, then the starting coordinate of the line segment on this canvas element is (50, 50), and the ending coordinate of the line segment is (60, 50). If the size of the canvas element is 200 * 100 pixels, then the starting coordinate of the line segment on this canvas element is (100, 50), and the ending coordinate of the line segment is (120, 50).

[0038] The initial size information of the container includes the width and height of the container. The width of the container is the length of the container in the first direction. The height of the container is the length of the container in the second direction.

[0039] Before drawing the screen, first set the initial size information of the container and the drawing logic of the canvas. The drawing logic of the canvas includes the drawing logic of multiple frames of the screen and the display order relationship between multiple frames of the screen. During the drawing process, the user can adjust the size of the container according to actual application requirements.

[0040] S102: The video controller fills the canvas element in the container based on the initial size information and the drawing logic, and performs drawing based on the canvas element.

[0041] Among them, based on the initial size information of the container, the canvas element is filled in the container, and at this time, the size of the canvas element is the same as the size of the container.

[0042] During the drawing process, the image is drawn based on the size information of the canvas element and the drawing logic. By changing the size of the container, and thus changing the size of the canvas element, the size of the canvas element is made to be the same as that of the container, thereby achieving magnification or reduction of the image.

[0043] S103: In response to the video controller receiving information on the scaling process of the container, perform a scaling process on the container to obtain the target size information of the container after the scaling process. Among them, to perform a scaling process on the container, one can use the mouse to click and drag the edge of the container to generate information on the scaling process of the container. Performing a scaling process on the container means reducing or enlarging the container to obtain the target size information of the container.

[0044] When a mouse press event is monitored, determine whether to perform a scaling process on the container. When a mouse press event, a mouse movement event, and a mouse button release event are sequentially monitored, it indicates that the user uses the mouse to click and drag the edge of the container to a target position to generate information on the scaling process of the container. In response to the video controller receiving information on the scaling process of the container, perform a scaling process on the container.

[0045] S104: The video controller fills the container with the canvas element based on the target size information and the drawing logic, and performs drawing based on the canvas element.

[0046] Among them, due to the scaling process of the container, the size information of the container changes. Based on the size information of the container after the scaling process, the canvas element is filled in the container, that is, the size of the canvas element is the same as that of the container after the scaling process, and the image is drawn based on the size information of the canvas element and the drawing logic.

[0047] Therefore, this embodiment provides a canvas drawing method, including: The video controller displays a container on the interface of the web page, sets the initial size information of the container, and the drawing logic of the canvas. The container is used to hold the canvas element of the canvas; The video controller fills the container with the canvas element based on the initial size information and the drawing logic, and performs drawing based on the canvas element; In response to the video controller receiving information on the scaling process of the container, perform a scaling process on the container to obtain the target size information of the container after the scaling process; The video controller fills the container with the canvas element based on the target size information and the drawing logic, and performs drawing based on the canvas element. Based on the above method, after each scaling process, a drawing is performed based on the size information of the container after the scaling process, so that the size of the container after the scaling process is the same as that of the drawn image, that is, no matter whether the container changes quickly or slowly, a drawing is immediately performed, which can reduce the impact of rapid scaling of the container, reduce the jitter effect, and improve the drawing quality.

[0048] Optionally, bind an event trigger function to the container; in response to detecting a zoom event, trigger the event trigger function, which is used to trigger the canvas element to fill the container and perform drawing based on the canvas element.

[0049] Among them, after obtaining the initial size information or target size information of the container, the canvas element is filled with the container and drawing is performed based on the canvas element. When drawing multiple frames of images, in order to keep the animation running, an event trigger function can be bound. The event trigger function is used to trigger the canvas element to fill the container and perform drawing based on the canvas element. When a zoom event of the container is detected, the event trigger function is triggered.

[0050] For example, open an HTML tag through a browser and listen for events through the ON function of the HTML tag. For example, if listening for a mouse click event, bind an onclick() function to the container. In this embodiment, since the zoom event of the container is to be listened for, an onresize() function is bound to the container. When the size of the container is adjusted, the onresize() function is triggered, the canvas element is filled with the container, and drawing is performed based on the canvas element. Specifically, the onresize() function listens for the width and height of the container, and when any one of these properties changes, the onresize() function is triggered.

[0051] By using the event trigger function, when it is detected that the size information of the container has changed, the canvas element is triggered to fill the container, and drawing of the image is performed on the canvas element. When drawing multiple frames of images, the animation can be kept running and the canvas can be kept from deforming.

[0052] In other embodiments, an event listener can also be bound to listen for the zoom event of the container, which will not be elaborated here.

[0053] Please refer to Figure 2 , Figure 2 which is a schematic flowchart of another embodiment of the canvas drawing method provided by this application. This embodiment is Figure 1 the specific implementation manner of obtaining the target size information of the container after zoom processing in response to zooming the container in

[0054] The canvas drawing method of this embodiment includes the following steps:

[0055] S201: Add an event element to the edge area of the container and bind a zoom event to the event element.

[0056] Among them, the event element is used to bind events. For example, the event element can bind a mouse click event, a mouse movement event, a mouse press event, or a mouse button release event. In this embodiment, since the scaling of the container is to be monitored, the scaling event bound by the event element can be a combined event of a mouse movement event, a mouse press event, and a mouse button release event. When it is monitored that the user presses the mouse and drags the mouse to move, it means that the scaling event bound by the event element is monitored.

[0057] The edge area of the container includes the positions where multiple pixels on the contour line of the container are located. For example, when the container is rectangular, the edge area of the container is the positions of the four sides of the container.

[0058] Specifically, event elements are added to the four edge areas of the container respectively, and each event element coincides with the corresponding edge area of the container.

[0059] Among them, taking the container as a rectangle as an example for illustration. The four edge areas of the container include the upper edge area, the left edge area, the lower edge area, and the right edge area. Assume that the size of the container is 100*100 pixels.

[0060] Obtain the width of the upper edge of the container, set the width of the event element to be the same as the width of the upper edge of the container, the height to be 1 pixel, and set the event element to coincide with the upper edge area of the container. If the width of the upper edge of the container is 100 pixels, then set the width of the size of the event element to be 100 pixels and the height to be 1 pixel. Based on the above method, the event element of the lower edge area of the container can be set, which will not be elaborated here.

[0061] Obtain the width of the left edge of the container, set the height of the event element to be the same as the height of the left edge of the container, the width to be 1 pixel, and set the event element to coincide with the left edge area of the container. If the height of the left edge of the container is 100 pixels, then set the height of the size of the event element to be 100 pixels and the width to be 1 pixel. Based on the above method, the event element of the right edge area of the container can be set, which will not be elaborated here.

[0062] S202: In response to monitoring the scaling event, perform scaling processing on the container.

[0063] Among them, in response to monitoring the scaling event, that is, it is monitored that the user presses the mouse, drags the mouse to move, and finally the mouse button is released, then perform scaling processing on the container to make the container shrink or expand.

[0064] Optionally, in response to monitoring the scaling event, the event element moves; based on the position of the event element and the position of the container, obtain the size change information of the container; based on the size change information of the container, perform scaling processing on the container.

[0065] Among them, when the user presses the mouse and drags the mouse to move, the event element moves. When the mouse button is released, the event element stays at the user's target position. Based on the position of the event element and the position of the container, the size change information of the container can be obtained.

[0066] For example, taking the right direction of the first direction as the positive direction of the horizontal axis and the downward direction of the second direction as the positive direction of the vertical axis for illustration. Among them, the first direction is the horizontal direction of the display component, and the second direction is the direction perpendicular to the horizontal direction. Assume that the abscissa of the pixels in the column of the right edge area of the container is A. After the event element corresponding to the right edge area moves, the abscissa of the pixels in the column of the event element is A + B, indicating that the event element has moved B pixel units to the right. Then the size change information of the container in the first direction is moving B pixel units to the right. At the same time, the ordinate of the pixels in the row of the lower edge area of the container is C. After the event element corresponding to the lower edge area moves, the ordinate of the pixels in the row of the event element is C - D, indicating that the event element has moved D pixel units upward. Then the size change information of the container in the second direction is moving D pixel units upward. Based on the size change information of the container, perform a scaling process on the container, that is, move the right boundary of the container B pixel units to the right and move the lower boundary of the container D pixel units upward.

[0067] S203: Based on the scaled container, obtain the target size information of the container.

[0068] Among them, taking the example in step S202, if the initial size information of the container is: the width of the container is 100 pixels and the height is 100 pixels, then the target size information of the scaled container is: the width of the container is 100 + B pixels and the height is 100 - D pixels (where D < 100).

[0069] Therefore, through the method of this embodiment, by adding event elements to the edge area of the container, binding and listening to the scaling of the container, and through the movement of the event elements, listen to the scaling of the container and obtain the target size information of the container.

[0070] Please refer to Figure 3 , Figure 3 which is a schematic flowchart of another embodiment of the canvas drawing method provided by this application.

[0071] The canvas drawing method of this embodiment includes the following steps:

[0072] S301: Set the initial size information of the container and the drawing logic of the canvas. Based on the initial size information, fill the canvas element with the container.

[0073] Among them, this step is the same as the steps of setting the initial size information of the container and the drawing logic of the canvas in steps S101 and S102, and covering the canvas element with the canvas based on the initial size information, which will not be elaborated here.

[0074] S302: Obtain the drawing frequencies of multiple frames of images, and draw multiple frames of images in sequence based on the drawing frequencies and drawing logic.

[0075] Among them, the drawing logic of the canvas includes the drawing logic of multiple frames of images and the display sequence relationship between multiple frames of images. The drawing frequencies of multiple frames of images usually coincide with the refresh rate of the display component of the electronic device. For example, the refresh rate of the display component can be 60Hz, 75Hz, 90Hz or 120Hz. For example, when the refresh rate of the display component is 60Hz, the drawing frequency of multiple frames of images is 60Hz, that is, the drawing frequency of multiple frames of images is about once every 16.7ms.

[0076] Draw multiple frames of images in sequence based on the drawing frequencies of multiple frames of images and the display sequence relationship between multiple frames of images. For one of the frames of images, draw the frame of image on the canvas element based on the drawing logic of this frame of image.

[0077] S303: In response to detecting a zoom event, obtain the zoom frequency of the container based on the zoomed container.

[0078] Among them, if a zoom event is detected, perform zoom processing on the container. Obtain the zoom frequency of the container based on the zoomed container.

[0079] Among them, the zoom frequency of the container can be obtained based on the zoom time of the container. For example, based on the refresh time of the previous frame of image and the time after the container is zoomed, calculate the difference between the two to obtain the zoom time of the container. Taking the zoom time of the container as 10ms as an example, the zoom frequency of the container is 100Hz.

[0080] S304: In response to the zoom frequency being greater than the drawing frequency, stop drawing the current image.

[0081] Among them, if the zoom frequency of the container is greater than the drawing frequency, it means that during the drawing process of the current image, the size of the container changes. The previous frame of image has been drawn, and at this time, the size of the canvas element is the same as that of the previous frame of image. The size of the canvas element is not the same as the size of the zoomed container, resulting in jitter during the animation playback and affecting the quality of the animation execution.

[0082] Based on the complexity of the image, the current image may have ended drawing or may be in the process of drawing. If the current image is in the process of drawing, stop drawing the current image.

[0083] S305: Obtain the target size information of the container, fill the canvas element to cover the container, obtain the drawing logic of the current screen, and perform drawing based on the canvas element and the drawing logic of the current screen.

[0084] Among them, based on the scaled container, obtain the target size information of the container. Fill the canvas element to cover the container, obtain the drawing logic of the current screen, and perform the drawing of the current screen on the canvas element.

[0085] Therefore, through the method of this embodiment, after each scaling process, perform one drawing based on the size information of the scaled container, so that the size of the scaled container and the drawn screen are kept consistent, that is, perform one frame compensation during two consecutive drawing processes with a fixed refresh rate, which can reduce the impact of rapid container scaling, reduce the jitter effect, and improve the drawing quality.

[0086] Please refer to Figure 4 , Figure 4 is Figure 1 a schematic diagram of the container in the initial state on the web interface in Figure 4 As shown in

[0087] On the web interface, draw the first container 401 in the drawing area 42, and the video controller generates the image information of the first container 401 on the interface of the display component. Among them, the first container 401 is the container in the initial state.

[0088] Please refer to Figure 5 , Figure 5 is Figure 1 a schematic diagram of the scaled container on the web interface in Figure 5 As shown in

[0089] In this embodiment, the first container 401 is enlarged to obtain the second container 402. In other embodiments, the first container 401 can also be reduced, which is not limited herein.

[0090] Please refer to Figure 6 , Figure 6 is a schematic diagram of the framework of an embodiment of the display device provided by this application. As shown in Figure 6As shown in the figure, the display device 100 includes a video controller 101 and a memory 102 connected to the video controller 101. Among them, the memory 102 is used to store computer programs, and the video controller 101 is used to execute the computer programs to implement the above-mentioned canvas drawing method.

[0091] Among them, the video controller 101 is used to generate image information on the display interface of the display device 100. For example, the video controller 101 displays a container on the interface of the web page.

[0092] Optionally, the display device 100 may further include a processor. The processor is connected to the memory. The steps of the above-mentioned canvas drawing method can also be implemented by the processor. The video controller is only used to display the screen on the interface of the web page. The memory 102 can be a memory stick, a TF card, etc., and can store all the information in the display device 100. The input original data, computer programs, intermediate operation results, and final operation results are all stored in the memory 102. It stores and retrieves information according to the position specified by the video controller 101. With the memory 102, the display device 100 has a memory function and can ensure normal operation. The memory 102 of the display device 100 can be divided into a main memory (RAM) and an auxiliary memory (external memory) according to its use, or there is also a classification method of dividing it into an external memory and an internal memory. The external memory is usually a magnetic medium or an optical disc, etc., which can store information for a long time. The RAM refers to the storage component on the motherboard, which is used to store the data and programs being executed currently, but is only used to temporarily store programs and data. When the power is turned off or cut off, the data will be lost.

[0093] Please refer to Figure 7 , Figure 7 is a schematic structural diagram of an embodiment of the computer-readable storage medium provided by this application. As Figure 7 shown, the computer-readable storage medium 110 stores program instructions 111 that can implement all the above methods.

[0094] If the units integrated in the functional units in the embodiments of this application are implemented in the form of software functional units and sold or used as independent products, they can be stored in the computer-readable storage medium 110. Based on such an understanding, the technical solution of this application, in essence, or the part that contributes to the prior art, or all or part of this technical solution, can be embodied in the form of a software product. The computer-readable storage medium 110 includes several instructions in a program instruction 111 to enable a computer device (which can be a personal computer, a system server, or a network device, etc.), a display device (such as an MP3, an MP4, etc., can also be a mobile terminal such as a mobile phone, a tablet computer, a wearable device, etc., or a desktop computer, etc.) or a processor to execute all or part of the steps of the methods of various embodiments of this application.

[0095] Among them, the processor can also be referred to as a CPU (Central Processing Unit, central processing unit). The processor may be an electronic chip with the ability to process signals. The processor can also be a general-purpose processor, a digital signal processor (DSP), an application-specific integrated circuit (ASIC), a field-programmable gate array (FPGA), or other programmable logic devices, discrete gate or transistor logic devices, discrete hardware components. The general-purpose processor can be a microprocessor or the processor can also be any conventional processor, etc. 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 aspects. Moreover, the present application can take the form of a computer program product implemented on one or more computer-readable storage media 110 (including but not limited to disk memory, CD-ROM, optical memory, etc.) containing computer-usable program code.

[0096] The present application is described with reference to the flowchart illustrations and / or block diagrams of methods, apparatuses (systems), and computer program products according to embodiments of the present application. It should be understood that each process and / or block in the flowchart illustrations and / or block diagrams, and the combination of processes and / or blocks in the flowchart illustrations and / or block diagrams, can be realized by the computer-readable storage medium 110. These computer-readable storage media 110 can be provided to the processor of a general-purpose computer, a special-purpose computer, an embedded processor, or other programmable data processing devices to generate a machine, such that the program instructions 111 executed by the processor of the computer or other programmable data processing devices generate means for realizing the functions specified in Figure 1 one process or multiple processes and / or blocks Figure 1 one block or multiple blocks.

[0097] These computer-readable storage media 110 can also be stored in a memory that can direct a computer or other programmable data processing device to work in a specific manner, such that the program instructions 111 stored in the computer-readable storage media 110 generate a manufactured article including instruction means, and the instruction means realizes the functions specified in Figure 1 one process or multiple processes and / or blocks Figure 1 one block or multiple blocks.

[0098] These computer-readable storage media 110 can also be loaded onto a computer or other programmable data processing device, such that a series of operation steps are executed on the computer or other programmable device to generate a computer-implemented process, so that the program instructions 111 executed on the computer or other programmable device provide means for realizing the functions specified in the flowchart illustrationFigure 1 One process or multiple processes and / or boxes Figure 1 Steps of the functions specified in one box or multiple boxes.

[0099] Any process or method description represented in the flowchart or otherwise described herein can be understood to represent a module, segment, or portion of code including one or more executable instructions for implementing a specific logical function or process. Moreover, the scope of the preferred embodiments of the present application includes additional implementations, where the functions may be executed not in the order shown or discussed, including in a substantially simultaneous manner or in the reverse order according to the functions involved, which should be understood by those skilled in the technical field to which the embodiments of the present application pertain.

[0100] The logic and / or steps represented in the flowchart or otherwise described herein, for example, can be regarded as an ordered list of executable instructions for implementing a logical function, and can be specifically implemented in any medium for use by an instruction execution system, apparatus, or device (which can be a personal computer, a server, a network device, or other systems that can fetch and execute instructions from the instruction execution system, apparatus, or device), or in combination with these instruction execution systems, apparatuses, or devices.

[0101] The above are only the embodiments of the present application and do not limit the patent scope of the present application. Any equivalent structural or equivalent process transformation made by using the content of the specification and drawings of the present application, or directly or indirectly applied in other related technical fields, shall be equally included in the patent protection scope of the present application.

Claims

1. A canvas drawing method, applied to a display device, the display device including a video controller, characterized in that, the canvas drawing method includes: the video controller displays a container on the interface of the web page, sets the initial size information of the container, and the drawing logic of the canvas, and the container is used to accommodate the canvas element of the canvas; the video controller fills the container with the canvas element based on the initial size information and the drawing logic, and performs drawing based on the canvas element; in response to the video controller receiving the scaling processing information of the container, performing scaling processing on the container to obtain the target size information of the scaled container; the video controller fills the container with the canvas element based on the target size information and the drawing logic, and performs drawing based on the canvas element.

2. The canvas drawing method according to claim 1, characterized in that, the step of performing scaling processing on the container to obtain the target size information of the scaled container includes: adding event elements to the edge area of the container and binding scaling events to the event elements; in response to monitoring the scaling event, performing scaling processing on the container; based on the scaled container, obtaining the target size information of the container.

3. The canvas drawing method according to claim 2, characterized in that, the step of adding event elements to the edge area of the container and binding scaling events to the event elements includes: adding event elements to the four edge areas of the container respectively, and each event element coincides with the corresponding edge area of the container.

4. The canvas drawing method according to claim 3, characterized in that, the step of performing scaling processing on the container in response to monitoring the scaling event includes: in response to monitoring the scaling event, the event element moves; based on the position of the event element and the position of the container, obtaining the size change information of the container; performing scaling processing on the container based on the size change information of the container.

5. The canvas drawing method according to claim 2, characterized in that, the step of filling the container with the canvas element based on the target size information and the drawing logic, and performing drawing based on the canvas element includes: binding an event trigger function to the container; in response to monitoring the scaling event, triggering the event trigger function, and the event trigger function is used to trigger the canvas element to fill the container and perform drawing based on the canvas element.

6. The canvas drawing method according to claim 1, characterized in that, the drawing logic includes the drawing logic of multiple frames of pictures and the display order relationship between multiple frames of pictures, and the step of filling the container with the canvas element based on the initial size information and the drawing logic, and performing drawing based on the canvas element includes: filling the container with the canvas element based on the initial size information; sequentially drawing the multiple frames of pictures based on the canvas element according to the display order relationship.

7. The canvas drawing method according to claim 6, wherein, the step of sequentially drawing the multiple frames of images based on the canvas elements according to the display sequence relationship includes: obtaining the drawing frequency of the multiple frames of images; drawing multiple frames of the images based on the drawing frequency and the drawing logic.

8. The canvas drawing method according to claim 2 or 7, wherein, the step of drawing multiple frames of the images based on the drawing frequency and the drawing logic includes: obtaining the scaling frequency of the container based on the scaled container; responding to the scaling frequency being greater than the drawing frequency, and stopping drawing the current image; covering the container with the canvas elements, obtaining the drawing logic of the current image, and performing drawing based on the canvas elements and the drawing logic of the current image.

9. A display device, wherein, it includes a video controller and a memory connected to the video controller. Among them, program data is stored in the memory, and the video controller retrieves the program data stored in the memory to execute the canvas drawing method according to any one of claims 1-8.

10. A computer-readable storage medium, wherein, the computer-readable storage medium stores a computer program, and the computer program is used to implement the canvas drawing method according to any one of claims 1-8 when executed by a processor.

Images