Focus frame drawing method and device based on HTML (Hypertext Markup Language) canvas

Abstract

The invention relates to the technical field of Web front-end development, in particular to a focus frame drawing method and device based on a HTML (Hypertext Markup Language) canvas. While code drawing avoidance is guaranteed, storage space and operation memory are saved, and processing speed is improved. In the method, on the basis of a selected focus frame picture, at least one local picture is determined for the focus element of the focus frame to be drawn in the selected focus frame picture, the position of each local picture is determined according to the position of the focus element, and the corresponding local picture is drawn on the determined position to obtain the focus frame of the focus element. According to the scheme, the complexity of focus frame drawing is lowered, a personalized focus frame is flexibly compatible, and various types of focus frames are drawn. In addition, not all of the focus frames of various sizes are needed to be drawn and stored so as to avoid drawing a great quantity of drawing codes. In addition, each type of focus frame only uses one focus frame picture, not overmany focus frame pictures are needed to be stored, storage space is saved, and processing speed and memory can be guaranteed.

Description

technical field [0001] The invention relates to the technical field of Web front-end development, in particular to a method and device for drawing a focus frame based on HTML canvas. Background technique [0002] The HTML5 standard has brought revolutionary changes to Web front-end development, greatly improving the richness and interactivity of web page display. Due to the cross-platform nature of the browser engine and the convenience of JavaScript script development and debugging, the Web front-end development technology is not only used for the development of web pages, but also for the front-end development of the user interface UI of mobile terminals and smart devices. Therefore, with the implementation of the HTML5 standard, more and more manufacturers have begun to adopt the browser-based Web UI development model in the UI field of smart terminals. Among them, Canvas is a new tag in the HTML5 standard. The drawing application programming interface API provided by it...

AI Technical Summary

Problems solved by technology

[0008] Specifically, although drawing the focus frame picture into Canvas can realize diversified focus frame drawing, it does not support the dynamic change of the focus frame size, that is, for focus elements of different sizes, it is still necessary to prepare the Matching pictures, and there are many sizes and types of focus elements involved in the UI. For each size type of focus element, dynamically select the appropriate picture to complete the drawing of the focus frame

Although this method can save the drawing work of the code, it increases the number of UI focus frame pictures (that is, material source files) and takes up more storage space, and the number of pictures that the UI needs to read, decode and draw at runtime More, affecting processing speed and memory

Images