Looking for breakthrough ideas for innovation challenges? Try Patsnap Eureka!

Drawing method based on HTML5 Canvas

A drawing method and image drawing technology, applied in the input/output process of data processing, instruments, electrical digital data processing, etc., can solve the problems of adding programs and complex mapping coordinates, etc., to improve response performance, ensure fluency, and ensure The effect of drawing fluency

Pending Publication Date: 2020-04-28
BANK OF COMMUNICATIONS
View PDF2 Cites 7 Cited by
  • Summary
  • Abstract
  • Description
  • Claims
  • Application Information

AI Technical Summary

Problems solved by technology

However, the problem brought by this technical solution is that it makes the calculation of the mapping coordinates of the mouse or touch position on the canvas relatively complicated, and the final output graphics need to be calculated and spliced ​​before they can be finalized, which undoubtedly increases the risk of introducing bugs into the program

Method used

the structure of the environmentally friendly knitted fabric provided by the present invention; figure 2 Flow chart of the yarn wrapping machine for environmentally friendly knitted fabrics and storage devices; image 3 Is the parameter map of the yarn covering machine
View more

Image

Smart Image Click on the blue labels to locate them in the text.
Viewing Examples
Smart Image
  • Drawing method based on HTML5 Canvas
  • Drawing method based on HTML5 Canvas
  • Drawing method based on HTML5 Canvas

Examples

Experimental program
Comparison scheme
Effect test

Embodiment Construction

[0048] The present invention will be described in detail below with reference to the drawings and specific embodiments.

[0049] Such as figure 1 As shown, a drawing method based on HTML5 Canvas includes the following steps:

[0050] S1, create the bottom layer And operation layer , Where the operation layer Is smaller than the bottom layer size of;

[0051] S2, according to the preset offset data, the operation layer Cover the bottom layer Above

[0052] S3, at the operation level Perform image drawing on the computer and record the image drawing track;

[0053] S4. Draw the trajectory according to the image and re-at the bottom layer Draw the image on to complete the drawing.

[0054] The present invention uses the principle of dynamic resolution to increase the drawing response performance by appropriately reducing the resolution, and at the same time constructs a double layer : Bottom layer Operation layer , To ensure the clarity of the drawn image.

[0055] In practical applications,...

the structure of the environmentally friendly knitted fabric provided by the present invention; figure 2 Flow chart of the yarn wrapping machine for environmentally friendly knitted fabrics and storage devices; image 3 Is the parameter map of the yarn covering machine
Login to View More

PUM

No PUM Login to View More

Abstract

The invention relates to a drawing method based on HTML5Canvas. The drawing method based on HTML5Canvas comprises the following steps that S1, a bottom layer (canvas) with the original size and an operation layer (canvas) with the size smaller than that of the bottom layer (canvas) are created; S2, covering the bottom layer (canvas) with an operation layer (canvas) according to preset offset data;S3, drawing an image on an operation layer (canvas), and recording an image drawing track; and S4, according to the image drawing track, re-drawing the image on the bottom layer (canvas) so as to complete drawing. Compared with the prior art, the method has the advantages that based on the dynamic resolution principle, the double-layer (canvas) is constructed, and the mouse or touch event is monitored on the smaller canvas on the upper layer so as to ensure the drawing fluency; and the drawing track of the upper layer is reproduced on the lower layer (canvas) so as to ensure the definition ofthe image.

Description

Technical field [0001] The invention relates to the technical field of drawing of mobile equipment, in particular to a drawing method based on HTML5 Canvas. Background technique [0002] HTML5 provides <canvas>Labels to draw graphics through scripts (usually JavaScript). It can not only be used to draw charts, make pictures, but even make animations and games. At present, most browsers (such as desktop and mobile versions of Chrome, Firefox, Safari, etc.) are almost right <canvas>There is better support, which allows many companies and developers to realize cross-platform front-end applications with graphics display and animation at a lower cost. [0003] Take the handwritten signature function module as an example. This function module has a wide range of uses and can be used in various scenarios. For example, on the contract interface of wealth management products, users are asked to sign to confirm the contract. However, companies or developers need to ensure that th...

Claims

the structure of the environmentally friendly knitted fabric provided by the present invention; figure 2 Flow chart of the yarn wrapping machine for environmentally friendly knitted fabrics and storage devices; image 3 Is the parameter map of the yarn covering machine
Login to View More

Application Information

Patent Timeline
no application Login to View More
IPC IPC(8): G06F3/0354G06F3/038G06F3/0484G06F3/0488
CPCG06F3/03543G06F3/03547G06F3/038G06F3/0484G06F3/0488
Inventor 卜一超
Owner BANK OF COMMUNICATIONS
Who we serve
  • R&D Engineer
  • R&D Manager
  • IP Professional
Why Patsnap Eureka
  • Industry Leading Data Capabilities
  • Powerful AI technology
  • Patent DNA Extraction
Social media
Patsnap Eureka Blog
Learn More
PatSnap group products

Browse by: Latest US Patents, China's latest patents, Technical Efficacy Thesaurus, Application Domain, Technology Topic, Popular Technical Reports.

© 2024 PatSnap. All rights reserved.Legal|Privacy policy|Modern Slavery Act Transparency Statement|Sitemap|About US| Contact US: help@patsnap.com