CN112269575A - Method for rendering dynamic two-dimensional scene by canvas - Google Patents
Method for rendering dynamic two-dimensional scene by canvas Download PDFInfo
- Publication number
- CN112269575A CN112269575A CN202011296688.4A CN202011296688A CN112269575A CN 112269575 A CN112269575 A CN 112269575A CN 202011296688 A CN202011296688 A CN 202011296688A CN 112269575 A CN112269575 A CN 112269575A
- Authority
- CN
- China
- Prior art keywords
- canvas
- invisible
- rendering
- center
- dynamic
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
- 238000000034 method Methods 0.000 title claims abstract description 28
- 238000009877 rendering Methods 0.000 title claims abstract description 27
- 208000018747 cerebellar ataxia with neuropathy and bilateral vestibular areflexia syndrome Diseases 0.000 claims abstract description 33
- 230000000007 visual effect Effects 0.000 claims abstract description 25
- 230000003068 static effect Effects 0.000 claims description 26
- 239000003086 colorant Substances 0.000 claims description 7
- 238000010422 painting Methods 0.000 claims description 5
- XLYOFNOQVPJJNP-UHFFFAOYSA-N water Substances O XLYOFNOQVPJJNP-UHFFFAOYSA-N 0.000 description 3
- 238000007792 addition Methods 0.000 description 1
- 230000009286 beneficial effect Effects 0.000 description 1
- 238000013461 design Methods 0.000 description 1
- 238000010586 diagram Methods 0.000 description 1
- 238000013507 mapping Methods 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 238000012544 monitoring process Methods 0.000 description 1
- 238000006467 substitution reaction Methods 0.000 description 1
- 239000002699 waste material Substances 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/34—Graphical or visual programming
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/957—Browsing optimisation, e.g. caching or content distillation
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
Abstract
The invention discloses a method for rendering a dynamic two-dimensional scene by canvas, which comprises the following steps of; step 1: determining a drawing origin center, and setting center.X and center.Y; step 2: the method comprises the steps that JavaScript is utilized to obtain the pixel size occupied by the width and the height of a document of a current browser, namely the width and the height, and then the canvas width and the canvas height are set according to requirements; and step 3: taking div as a parent container of the canvas, and adding a canvas element to the div in a dynamic mode; and 4, step 4: setting a plurality of canvases, wherein one canvas is set as a visual canvas _ realCanvas, and other canvases are set as non-visual canvases _ notVisibleCanvas1, _ notVisibleCanvas2 and … … _ notVisibleCanvas; according to the invention, the visual canvas and the invisible canvas are creatively constructed for rendering through the technical support of the browser to the canvas, so that the browser performance of canvas drawing is greatly improved, and compared with the conventional common drawing mode, the rendering is smoother and the interactivity is greatly improved.
Description
Technical Field
The invention relates to the technical field of two-dimensional scene drawing, in particular to a method for drawing a dynamic two-dimensional scene by canvas.
Background
In the conventional canvas method, all objects to be drawn are generally placed in one canvas for drawing, which greatly consumes the performance of the browser and causes a large load on the browser. The most direct look and feel is that the object to be drawn is displayed ten calories on the page. The reason for this is that,
1. the image is drawn in frames, if all objects are drawn on a canvas, the coordinates of all objects on the canvas need to be calculated when each frame is rendered, and particularly if the coordinates of some static objects are very complicated to calculate, each frame needs to be recalculated when being drawn, which is a huge waste of resources for the browser engine.
The canvas drawing method is based on Javascript, and if all objects are drawn together, if an operation error occurs when a certain object is calculated before drawing, the error affects the drawing of all subsequent objects.
When the target is drawn, a certain stacking relationship exists, and if the corresponding stacking relationship needs to be processed by extra calculation according to a traditional method, performance influence is caused.
Disclosure of Invention
The invention aims to provide a method for rendering a dynamic two-dimensional scene by canvas.
The purpose of the invention can be realized by the following technical scheme: a method for rendering a dynamic two-dimensional scene by canvas specifically comprises the following steps;
step 1: determining a drawing origin center, and setting center.X and center.Y;
step 2: the method comprises the steps that JavaScript is utilized to obtain the pixel size occupied by the width and the height of a document of a current browser, namely the width and the height, and then the canvas width and the canvas height are set according to requirements;
and step 3: taking div as a parent container of the canvas, and adding a canvas element to the div in a dynamic mode;
and 4, step 4: setting a plurality of canvases, wherein one canvas is set as a visual canvas _ realCanvas, and other canvases are set as non-visual canvases _ notVisibleCanvas1, _ notVisibleCanvas2 and … … _ notVisibleCanvas;
and 5: setting the background of the visible canvas into one or more colors or a picture according to requirements, namely setting the css style of a parent container, setting a certain color or background picture for a background element of background of div, and setting the background of parent containers div of other invisible canvases into transparent colors, namely 'rgba (0,0,0, 0)' or '# 0000';
step 6: determining a canvas for static target drawing and a canvas for dynamic target drawing from the invisible canvas;
and 7: before the first frame is drawn, calculating the calculation attributes of the dynamic and static targets in the canvas determined in the step 6 respectively, and then drawing the target to be drawn on the canvas aiming at each invisible canvas and the corresponding scene by using the paintbrush determined in the step 4;
and 8: during actual drawing, the painting brush of the visible canvas takes the invisible canvas as a whole picture to draw, namely, realCtx.drawImage;
and step 9: and (4) when each frame is drawn subsequently, calculating the calculation attribute of the dynamic object, if the static attribute is not changed, not calculating, and drawing the object on the invisible canvas on the visible canvas as a picture in the drawing of each frame according to the sequence set in the step (7).
As a further improvement of the invention: determining a drawing origin center in step 1, where center.x represents an abscissa, center.y represents an ordinate, a default drawing origin of the canvas is an upper left corner of the canvas, the abscissa increases from the left to the right of the screen in sequence, and the ordinate increases from the top to the bottom of the screen in sequence.
As a further improvement of the invention: in step 4, all the canvases need to be set to be uniform in length and width, that is, the pixel size determined in step 2, and a brush needs to be set for a plurality of canvases at the same time, the brush is used for drawing a target to be drawn on the canvases, the brush can be obtained by a canvas with an api, and the visual canvas is used as an example, realCtx ═ realcanvas.
As a further improvement of the invention: in step 8, the first parameter is the invisible canvas, the second parameter and the third parameter respectively represent the abscissa and the ordinate of the image drawing, and the third parameter and the fourth parameter represent the size of the invisible canvas, so that when contents on different invisible canvases are drawn, the drawing sequence of the invisible canvas needs to be set according to the up-down stacking relation between the contents, and then each invisible canvas is drawn from the bottommost layer to the topmost layer in sequence.
As a further improvement of the invention: in the method, two core parts are respectively a visible canvas and an invisible canvas;
the invisible canvas is used for drawing a target to be drawn;
and the visual canvas is used for drawing the invisible canvas as an image to be displayed on the browser.
As a further improvement of the invention: the size of the invisible canvas needs to be set to be uniform, the size and the position of the invisible canvas need to be set to be uniform, the invisible canvas is enabled to be overlapped, the background color of the invisible canvas is set to be completely transparent, the invisible canvas can be multiple, the invisible canvas is divided into two types, one type is used for drawing static objects, and the other type is used for drawing invisible objects.
As a further improvement of the invention: the canvas for drawing the static object, wherein if the position and the size of the static object are not changed, recalculation is not needed, and the content on the canvas does not need to be erased and redrawn; if both their position and size change, the original image is again erased and redrawn.
As a further improvement of the invention: the drawing method of the two kinds of canvas comprises the following steps:
s1, determining the size and the position of the canvas;
s2, determining the drawing coordinate system of each invisible canvas, wherein the coordinate systems need to be consistent;
s3, determining the stacking relation between the images, and setting the drawing sequence of the invisible canvas on the visible canvas;
s4, calculating the size and the position of the target on each invisible canvas, and drawing the target on the invisible canvas;
s5, according to the sequence in S3, the content on the non-visual canvas is drawn on the visual canvas as an image in sequence.
The invention has the beneficial effects that:
(1) the browser supports the canvas technology, the visible canvas and the invisible canvas are creatively constructed for rendering, so that the browser performance of canvas drawing is greatly improved, the rendering is smoother and the interactivity is greatly improved compared with the conventional common drawing mode;
(2) by monitoring the canvas used to draw the static object, if the position and size of the static object has not changed, then no recalculation is required, the content on the canvas also need not be erased for redrawing, and the performance is again improved compared to the existing sequential redrawing.
Drawings
The invention will be further described with reference to the accompanying drawings.
FIG. 1 is a canvas data flow diagram of the present invention;
FIG. 2 is a flowchart of the specific operation of the canvas rendering of the present invention.
Detailed Description
The technical solutions in the embodiments of the present invention will be clearly and completely described below with reference to the drawings in the embodiments of the present invention, and it is obvious that the described embodiments are only a part of the embodiments of the present invention, and not all of the embodiments. All other embodiments, which can be derived by a person skilled in the art from the embodiments given herein without making any creative effort, shall fall within the protection scope of the present invention.
Referring to fig. 1-2, the present invention is a method for rendering a dynamic two-dimensional scene by canvas, which is characterized in that: the method specifically comprises the following steps:
step 1: and determining a drawing origin center, wherein center.X represents an abscissa, center.Y represents an ordinate, the default drawing origin of the canvas is the upper left corner of the canvas, the abscissa increases from the left side to the right side of the screen in sequence, and the ordinate increases from the upper side to the lower side of the screen in sequence. Sometimes, the origin can be set at the top or bottom of the line in the canvas by coordinate changes for the needs of the actual scene and for computational convenience. Assuming now that the origin of coordinates is shifted in the lateral direction by w (px pixels) and in the longitudinal direction by h (px pixels), the new center coordinate is center.x ═ center.x + w, and center.y ═ center.y + h.
Step 2: and obtaining the pixel size occupied by the width and the height of the document of the current browser by using JavaScript, namely the width and the height. The canvas width and canvas height can then be set as required, which can be generally set to be consistent with the browser document width and height.
And step 3: in a web page where the canvas element < canvas > needs to be wrapped by the < div > element, we need to add the canvas element to the div in a dynamic way, with the div as the parent container of the canvas.
And 4, step 4: a plurality of canvases are set, wherein one canvas is set as a visual canvas _ realCanvas, and other canvases are set as non-visual canvases _ notVisibleCanvas1, _ notVisibleCanvas2, … … _ notVislibleN. It is particularly desirable to set all canvases to a uniform length and width, i.e., the pixel size determined in step 2 (canvas width and canvas height). Meanwhile, a painting brush is required to be arranged for a plurality of canvases, and the painting brush is used for drawing the target to be drawn on the canvases. The paintbrush can be obtained by canvas with api, and a browser is informed to draw a two-dimensional scene by drawing a visual canvas in the two-dimensional scene as example _ realCtx ═ realcanvas.
And 5: from step 3, each canvas element has a div parent. The background of the visual canvas may be set to one or more colors as needed, or a picture, i.e. the css style of the parent container is set, and a certain color or background picture is set for the background element of the div. But other non-visible canvases need to have the background of their parent container div set to a transparent color, i.e. "rgba (0,0,0, 0)" or "# 0000".
Step 6: from the invisible canvas (_ notVisibleCanvas1, _ notVisibleCanvas2, … … _ notVisibleCanvas) it is determined which are the canvases drawn by the static targets and which are the canvases drawn by the dynamic targets, according to the actual scene of the application, for example, the passage of a water pipe is a static target and the flow of water in a water pipe is a dynamic target.
And 7: before starting to draw the first frame, the calculated attributes (size, position, color or mapping) in the canvas of the dynamic and static objects determined in step 6 need to be calculated separately. And then drawing the target to be drawn on each invisible canvas and corresponding scene by using the brush determined in the step 4.
And 8: when actually drawing, the brush of the visual canvas draws the invisible canvas as a whole picture, namely, the invisible canvas is drawn (notVisibleCanvas 1,0,0, _ notVisibleCanvas1.width, _ notVisibleCanvas1. height); wherein the first parameter _ notVisibleCanvas1 is the non-visible canvas, the second parameter 0 and the third parameter 0 represent the abscissa and ordinate of the drawing of the image, respectively, and the fourth parameter _ notVisibleCanvas1.width and the fifth parameter _ notVisibleCanvas1.height represent the size of the non-visible canvas. Therefore, when contents on different invisible canvas are drawn, the drawing sequence of the invisible canvas needs to be set according to the upper and lower stacking relation among the invisible canvas, and then each invisible canvas is drawn from the bottommost layer to the topmost layer in sequence.
And step 9: when each frame is drawn subsequently, the calculation attribute of the dynamic object still needs to be calculated, and if the static attribute does not change, the calculation is not needed
According to the sequence set in the step 7, the target on the invisible canvas is drawn on the visible canvas as a picture in each frame.
In the method, two core parts are respectively a visible canvas and an invisible canvas; the invisible canvas is used for drawing a target to be drawn and is not used for displaying a screen;
the visual canvas is used for drawing the invisible canvas as an image and needs to be displayed on a screen;
the size of the invisible canvas is set to be uniform in size and position, the invisible canvas is enabled to be overlapped, the background color of the invisible canvas is set to be completely transparent, the number of the invisible canvas can be multiple, the plurality of the canvas is divided into two types, one type is used for drawing a static object, and the other type is used for drawing the invisible object;
the canvas for drawing the static object, wherein if the position and the size of the static object are not changed, recalculation is not needed, and the content on the canvas does not need to be erased and redrawn; if the canvas position and size of the static object are changed, the original image needs to be erased and redrawn again by calculation;
as a further improvement of the invention: the two canvas drawing methods comprise the following specific design and implementation steps:
s1, determining the size and the position of the canvas;
s2, determining the drawing coordinate system of each invisible canvas, wherein the coordinate systems need to be consistent;
s3, determining the stacking relation between the images, and setting the drawing sequence of the invisible canvas on the visible canvas;
s4, calculating the size and the position of the target on each invisible canvas, and drawing the target on the invisible canvas;
s5, according to the sequence in S3, the content on the non-visual canvas is drawn on the visual canvas as an image in sequence.
When the invention works, a visible canvas and a plurality of invisible canvases need to be set firstly, a drawing origin center is determined, and center.X and center.Y are set; the method comprises the steps that JavaScript is utilized to obtain the pixel size occupied by the width and the height of a document of a current browser, namely the width and the height, and then the canvas width and the canvas height are set according to requirements; taking div as a parent container of the canvas, and adding a canvas element to the div in a dynamic mode; setting a plurality of canvases, wherein one canvas is set as a visual canvas _ realCanvas, and other canvases are set as non-visual canvases _ notVisibleCanvas1, _ notVisibleCanvas2 and … … _ notVisibleCanvas; setting the background of the visible canvas into one or more colors or a picture according to requirements, namely setting the css style of a parent container, setting a certain color or background picture for a background element of background of div, and setting the background of parent containers div of other invisible canvases into transparent colors, namely 'rgba (0,0,0, 0)' or '# 0000'; determining a canvas for static target drawing and a canvas for dynamic target drawing from the invisible canvas; before the first frame is drawn, calculating the calculation attributes of the dynamic and static targets in the canvas determined in the step 6 respectively, and then drawing the target to be drawn on the canvas aiming at each invisible canvas and the corresponding scene by using the paintbrush determined in the step 4; during actual drawing, the painting brush of the visible canvas takes the invisible canvas as a whole picture to draw, namely, realCtx.drawImage; and (4) when each frame is drawn subsequently, calculating the calculation attribute of the dynamic object, if the static attribute is not changed, not calculating, and drawing the object on the invisible canvas on the visible canvas as a picture in the drawing of each frame according to the sequence set in the step (7).
The foregoing is merely exemplary and illustrative of the present invention and various modifications, additions and substitutions may be made by those skilled in the art to the specific embodiments described without departing from the scope of the invention as defined in the following claims.
Claims (8)
1. A method for rendering a dynamic two-dimensional scene by canvas specifically comprises the following steps;
step 1: determining a drawing origin center, and setting center.X and center.Y;
step 2: the method comprises the steps that JavaScript is utilized to obtain the pixel size occupied by the width and the height of a document of a current browser, namely the width and the height, and then the canvas width and the canvas height are set according to requirements;
and step 3: taking div as a parent container of the canvas, and adding a canvas element to the div in a dynamic mode;
and 4, step 4: setting a plurality of canvases, wherein one canvas is set as a visual canvas _ realCanvas, and other canvases are set as non-visual canvases _ notVisibleCanvas1, _ notVisibleCanvas2 and … … _ notVisibleCanvas;
and 5: setting the background of the visible canvas into one or more colors or a picture according to requirements, namely setting the css style of a parent container, setting a certain color or background picture for a background element of background of div, and setting the background of parent containers div of other invisible canvases into transparent colors, namely 'rgba (0,0,0, 0)' or '# 0000';
step 6: determining a canvas for static target drawing and a canvas for dynamic target drawing from the invisible canvas;
and 7: before the first frame is drawn, calculating the calculation attributes of the dynamic and static targets in the canvas determined in the step 6 respectively, and then drawing the target to be drawn on the canvas aiming at each invisible canvas and the corresponding scene by using the paintbrush determined in the step 4;
and 8: during actual drawing, the painting brush of the visible canvas takes the invisible canvas as a whole picture to draw, namely, realCtx.drawImage;
and step 9: and (4) when each frame is drawn subsequently, calculating the calculation attribute of the dynamic object, if the static attribute is not changed, not calculating, and drawing the object on the invisible canvas on the visible canvas as a picture in the drawing of each frame according to the sequence set in the step (7).
2. The method for canvas rendering a dynamic two-dimensional scene as claimed in claim 1, wherein in step 1, a rendering origin center is determined, where center.x represents an abscissa and center.y represents an ordinate, the default rendering origin of canvas is the upper left corner of the canvas, the abscissa increases from the left side to the right side of the screen, and the ordinate increases from the top to the bottom of the screen, and the origin is set at the top or the bottom of the center line of the canvas by coordinate change according to the requirement of the actual scene, and assuming that the coordinate origin is now translated in the horizontal direction w and the vertical direction h, the new center coordinate is center.x ═ center.x + w and center.y ═ center.y + h.
3. The method for canvas rendering of claim 1, wherein in step 4, all canvases need to be set to a uniform length and width, that is, the pixel size determined in step 2, and a brush needs to be set for a plurality of canvases, the brush is used to render the target to be rendered on the canvas, the brush can be obtained by the canvas itself with api, taking the visual canvas as example _ realCtx ═ realcanvas.
4. The method for canvas rendering a dynamic two-dimensional scene as claimed in claim 1, wherein in step 8, the first parameter is the invisible canvas, the second and third parameters represent the abscissa and ordinate of the image rendering respectively, and the third and fourth parameters represent the size of the invisible canvas, so that when the contents on different invisible canvases are rendered, the rendering order of the invisible canvas is set according to the top-bottom stacking relationship between the invisible canvases, and then each invisible canvas is rendered from the bottom layer to the top layer in turn.
5. The method for canvas rendering a dynamic two-dimensional scene as claimed in claim 1, wherein there are two core parts, respectively, a visible canvas and an invisible canvas;
the invisible canvas is used for drawing a target to be drawn;
and the visual canvas is used for drawing the invisible canvas as an image and displaying the image in the browser.
6. The method for canvas rendering a dynamic two-dimensional scene as claimed in claim 5, wherein the size of the invisible canvas is set to be uniform, the invisible canvas is set to be transparent, the number of the invisible canvas is ensured to be overlapped, the background color is set to be completely transparent, the number of the invisible canvas is multiple, and the plurality of canvas is divided into two types, one type is used for rendering the static object and the other type is used for rendering the invisible object.
7. The method for canvas rendering a dynamic two-dimensional scene as claimed in claim 1, wherein the canvas for rendering the static object, wherein when the position and size of the static object is not changed, the recalculation is not performed and the content on the canvas does not need to be erased for redrawing; when the position and the size of the image are changed, the calculation is carried out again, and the original image is erased and redrawn.
8. The method for canvas rendering a dynamic two-dimensional scene as claimed in claim 5, wherein said two canvas rendering methods comprise the following steps:
s1, determining the size and the position of the canvas;
s2, determining the drawing coordinate system of each invisible canvas, wherein the coordinate systems need to be consistent;
s3, determining the stacking relation between the images, and setting the drawing sequence of the invisible canvas on the visible canvas;
s4, calculating the size and the position of the target on each invisible canvas, and drawing the target on the invisible canvas;
s5, according to the sequence in S3, the content on the non-visual canvas is drawn on the visual canvas as an image in sequence.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202011296688.4A CN112269575A (en) | 2020-11-18 | 2020-11-18 | Method for rendering dynamic two-dimensional scene by canvas |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202011296688.4A CN112269575A (en) | 2020-11-18 | 2020-11-18 | Method for rendering dynamic two-dimensional scene by canvas |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN112269575A true CN112269575A (en) | 2021-01-26 |
Family
ID=74340254
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202011296688.4A Pending CN112269575A (en) | 2020-11-18 | 2020-11-18 | Method for rendering dynamic two-dimensional scene by canvas |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN112269575A (en) |
Citations (9)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103873277A (en) * | 2012-12-12 | 2014-06-18 | 中国科学院声学研究所 | Layered network topology visualizing method and system |
| CN106022424A (en) * | 2016-05-10 | 2016-10-12 | 腾讯科技（深圳）有限公司 | Method and apparatus for generating two-dimensional code picture having dynamic effect |
| US20160328486A1 (en) * | 2013-06-28 | 2016-11-10 | Guangzhou Ucweg Computer Tecnology Co., Ltd. | Canvas element rendering method and apparatus implemented on android system based on gpu |
| CN107172474A (en) * | 2017-03-31 | 2017-09-15 | 武汉斗鱼网络科技有限公司 | A kind of utilization painting canvas draws the method and device of barrage |
| WO2018050003A1 (en) * | 2016-09-14 | 2018-03-22 | 阿里巴巴集团控股有限公司 | 3d canvas web page element rendering method and apparatus, and electronic device |
| CN108665520A (en) * | 2018-04-24 | 2018-10-16 | 微梦创科网络科技（中国）有限公司 | A kind of method and device that page animation renders |
| CN109491654A (en) * | 2018-09-18 | 2019-03-19 | 西安葡萄城信息技术有限公司 | A kind of table method for drafting and system based on HTML5 Canvas |
| CN109783102A (en) * | 2019-01-18 | 2019-05-21 | 北京城市网邻信息技术有限公司 | Method, apparatus, equipment and the storage medium that Canvas painting canvas generates in a kind of small routine |
| CN110688422A (en) * | 2019-08-19 | 2020-01-14 | 浙江浙大中控信息技术有限公司 | Method for realizing train passenger capacity analysis by utilizing real-track running chart |
-
2020
- 2020-11-18 CN CN202011296688.4A patent/CN112269575A/en active Pending
Patent Citations (9)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103873277A (en) * | 2012-12-12 | 2014-06-18 | 中国科学院声学研究所 | Layered network topology visualizing method and system |
| US20160328486A1 (en) * | 2013-06-28 | 2016-11-10 | Guangzhou Ucweg Computer Tecnology Co., Ltd. | Canvas element rendering method and apparatus implemented on android system based on gpu |
| CN106022424A (en) * | 2016-05-10 | 2016-10-12 | 腾讯科技（深圳）有限公司 | Method and apparatus for generating two-dimensional code picture having dynamic effect |
| WO2018050003A1 (en) * | 2016-09-14 | 2018-03-22 | 阿里巴巴集团控股有限公司 | 3d canvas web page element rendering method and apparatus, and electronic device |
| CN107172474A (en) * | 2017-03-31 | 2017-09-15 | 武汉斗鱼网络科技有限公司 | A kind of utilization painting canvas draws the method and device of barrage |
| CN108665520A (en) * | 2018-04-24 | 2018-10-16 | 微梦创科网络科技（中国）有限公司 | A kind of method and device that page animation renders |
| CN109491654A (en) * | 2018-09-18 | 2019-03-19 | 西安葡萄城信息技术有限公司 | A kind of table method for drafting and system based on HTML5 Canvas |
| CN109783102A (en) * | 2019-01-18 | 2019-05-21 | 北京城市网邻信息技术有限公司 | Method, apparatus, equipment and the storage medium that Canvas painting canvas generates in a kind of small routine |
| CN110688422A (en) * | 2019-08-19 | 2020-01-14 | 浙江浙大中控信息技术有限公司 | Method for realizing train passenger capacity analysis by utilizing real-track running chart |
Non-Patent Citations (1)
| Title |
|---|
| 万晓凌: "《学通Windows Phone》", 31 January 2013, 东南大学出版社 * |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN109783181B (en) | Screen adaptive display method, electronic device and computer storage medium | |
| US9275493B2 (en) | Rendering vector maps in a geographic information system | |
| CN110956673A (en) | Map drawing method and device | |
| KR20150091132A (en) | Page rendering method and apparatus | |
| US8144166B2 (en) | Dynamic pixel snapping | |
| US20140354643A1 (en) | Producing three-dimensional graphics | |
| CN106095437A (en) | The implementation method of the layout type of user interface RTL from right to left and device | |
| CN109542987B (en) | Online map storage method based on Canvas | |
| US20140225894A1 (en) | 3d-rendering method and device for logical window | |
| CN113177172A (en) | WebGL-based efficient display method for large-batch three-dimensional characters | |
| CN115439609B (en) | Three-dimensional model rendering method, system, equipment and medium based on map service | |
| US20240087228A1 (en) | Method for scheduling and displaying three-dimensional annotations | |
| CN114648603B (en) | Method and system for realizing fly-line dynamic effect based on canvas and echarts | |
| US20240125613A1 (en) | Map generation method and map generation apparatus | |
| CN107707965A (en) | The generation method and device of a kind of barrage | |
| CN110851050B (en) | Method and device for testing clicking of page elements | |
| CN115237522A (en) | Page self-adaptive display method and device | |
| CN114827718A (en) | Method and device for self-adaptive alignment display of real-time video screen-combining characters in cloud conference | |
| US8760472B2 (en) | Pixel transforms | |
| CN109104628B (en) | Focus foreground generation method, storage medium, device and system of android television | |
| CN103678261A (en) | Method, device and equipment for rapidly displaying TTFs | |
| CN114692034A (en) | Image display method, image display device, electronic equipment and computer storage medium | |
| CN112269575A (en) | Method for rendering dynamic two-dimensional scene by canvas | |
| CN104424174A (en) | Document processing system and document processing method | |
| US11887255B2 (en) | Method and system for rendering boundary of map area within game map, and computer-readable storage medium |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| RJ01 | Rejection of invention patent application after publication |
Application publication date: 20210126 |
|
| RJ01 | Rejection of invention patent application after publication |