CN109254705A - A kind of electronics scraping award method, system and device based on Canvas - Google Patents
A kind of electronics scraping award method, system and device based on Canvas Download PDFInfo
- Publication number
- CN109254705A CN109254705A CN201810882869.1A CN201810882869A CN109254705A CN 109254705 A CN109254705 A CN 109254705A CN 201810882869 A CN201810882869 A CN 201810882869A CN 109254705 A CN109254705 A CN 109254705A
- Authority
- CN
- China
- Prior art keywords
- scraping award
- canvas
- region
- scraping
- electronics
- 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
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0481—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/451—Execution arrangements for user interfaces
Abstract
The invention discloses a kind of electronics scraping award method, system and device based on Canvas, this method comprises: S1, obtaining user in real time in first action event in the first scraping award region to scraping award；The first action event that S2, basis obtain in real time, parsing obtain user and are formed by the second scraping award region in the scraping award path in the first scraping award region；S3, the filling format for removing the second scraping award region, correspondence show the first picture；First picture is drawing outcomes；Wherein, first scraping award region is drawn by following steps and is obtained: the first picture is drawn on Canvas painting canvas；It is filled on Canvas painting canvas according to preset filling format, obtains the first scraping award region for covering first picture.The present invention is based on Canvas painting canvas to carry out electronics scraping award, and occupancy memory space is smaller, and the speed of service is fast, ensure that the good Interactive Experience with user, can be widely applied in internet industry.
Description
Technical field
The present invention relates to software technology field, more particularly to a kind of electronics scraping award method based on Canvas, system and
Device.
Background technique
With the development of mobile terminal webpage, various interactive games Internet-based, Interactive Experience activity are also come into being,
Client and user can be enhanced in these interactions, and the interactivity between user and good friend improves the entertaining of various game, activity etc.
Property.With the continuous development of the new technologies such as cloud computing, big data, electronics prize drawing Internet-based is also gradually promoted, electronics branch
It pays, self-aided terminal, video class, relay class game, all there are various forms of electronics prize drawing forms, especially various electronics scraping awards
Mode.The consumer behavior and social activity of modern is combined closely, interactive game, interaction entertainment, line holographic projections, the skills such as AR augmented reality
Art is all combined with electronics scraping award.At present in technology, electronics scraping award mainly shows prize drawing picture, pumping of the user in display
Carry out operation scraping award on prize picture, this technology, prize drawing picture can occupy more memory space, cause the speed of service compared with
Slowly, Interactive Experience is influenced.
And in existing electronics scraping award method, when sometimes user's operation is excessively frequent, the region not scraped also will lead to
The phenomenon that showing in advance also causes Interactive Experience sense poor.
Canvas:Canvas painting canvas is that the label increased newly in HTML5 is used to generate image in real time in webpage, and can be with
Picture material is operated, substantially it is the bitmap that can be operated with JavaScript.
Context object: being obtained by getContext () method, indicates to return to a ring for drawing on painting canvas
Border.
Mouse event: also referred to as mouse_event, is a computer function, and function is comprehensive mouse movement and button point
It hits.
Touch event: the touch operation event of touch control device.
BeginPath () method: starting a new set of subpath in a painting canvas, and beginPath () is indicated
It abandons any path currently defined and starts a new subpath, it is subsequent to draw on new path.
ClosePath () method: it is opposite with beginPath () method, that is, current subpath is closed, pen point is returned
To the method for current subpath starting point.BeginPath () method and closePath () method are in Canvas painting canvas
Common drawing tool.
Summary of the invention
In order to solve the above technical problems, the object of the present invention is to provide a kind of electronics scraping award side based on Canvas
Method, system and device.
The present invention solves the first technical solution used by its technical problem:
A kind of electronics scraping award method based on Canvas, comprising the following steps:
S1, user is obtained in real time in first action event in the first scraping award region to scraping award；
The first action event that S2, basis obtain in real time, parsing obtain user in the scraping award path institute in the first scraping award region
The the second scraping award region formed；
S3, the filling format for removing the second scraping award region, correspondence show the first picture；First picture is prize drawing knot
Fruit；
Wherein, first scraping award region is drawn by following steps and is obtained:
The first picture is drawn on Canvas painting canvas；
It is filled on Canvas painting canvas according to preset filling format, obtain covering first picture first is scraped
Encourage region.
Further, when drawing the first scraping award region, by obtain encapsulate the context objects of a variety of drawing functions into
Row is drawn.
Further, first action event includes mouse event and HTML event.
Further, when first action event is mouse event, the step S1, specifically:
User is obtained in real time in the mouse event in the first scraping award region to scraping award, and is detecting that mouse starts to move
When, judge that the operation object of the mouse is the end PC or intelligent mobile terminal, if the end PC, then mouse event uses mouse thing
Part, otherwise if intelligent mobile terminal, then mouse event uses touch event.
Further, the step S2, specifically includes:
According to the first action event obtained in real time, initial position when mouse starts mobile is obtained, and according to mouse
Real-time movement routine obtains user in the scraping award path in the first scraping award region；
The second scraping award region is correspondingly formed according to scraping award path.
Further, described the step of second scraping award region is correspondingly formed according to scraping award path, specifically:
According to scraping award path, after the enclosed region that corresponding generation scraping award path is constituted, the enclosed region of generation is made
For the second scraping award region.
Further, further comprising the steps of between the step S1 and S2:
A single sub path is created by beginPath () method, the first action event of the user obtained in real time is directed toward
It is handled on the subpath newly-built to this；
It is further comprising the steps of after the step S2:
Pass through the subpath that closePath () method closure is newly-built.
Further, the preset filling format includes preset the fill style and Graphicxtras Frames Collection.
The present invention solves the second technical solution used by its technical problem:
A kind of electronics scraping award system based on Canvas, comprising:
Acquisition module, for obtaining user in real time in first action event in the first scraping award region to scraping award；
Parsing module, for according to the first action event obtained in real time, parsing to obtain user in the first scraping award region
Scraping award path is formed by the second scraping award region；
Scraping award module, for removing the filling format in the second scraping award region, correspondence shows the first picture；First figure
Piece is drawing outcomes；
Wherein, acquisition is drawn in first scraping award region in the following manner:
The first picture is drawn on Canvas painting canvas；
It is filled on Canvas painting canvas according to preset filling format, obtain covering first picture first is scraped
Encourage region.
The present invention solves third technical solution used by its technical problem:
A kind of electronics scraping award device based on Canvas, comprising:
At least one processor；
At least one processor, for storing at least one program；
When at least one described program is executed by least one described processor, so that at least one described processor is realized
A kind of electronics scraping award method based on Canvas described in first technical solution.
The beneficial effects of the present invention are: the present invention represents the first of drawing outcomes by drawing on Canvas painting canvas in advance
It after picture, is filled on Canvas painting canvas according to preset filling format, covers the first picture, to obtain the first scraping award
Behind region, can real-time action event according to user in the first scraping award region, parsing obtains the scraping award path institute shape of user
At the second scraping award region show drawing outcomes to accordingly remove the filling format in the second scraping award region.The present invention is based on
Canvas painting canvas carries out electronics scraping award, and occupancy memory space is smaller, and the speed of service is fast, ensure that the good mutual kinetoplast with user
It tests.
Detailed description of the invention
Fig. 1 is a kind of flow chart of electronics scraping award method based on Canvas of the invention；
Fig. 2 is a kind of structural schematic diagram of electronics scraping award system based on Canvas of the invention；
Fig. 3 is a kind of structural schematic diagram of electronics scraping award device based on Canvas of the invention.
Specific embodiment
Referring to Fig.1, the electronics scraping award method based on Canvas that the present invention provides a kind of, comprising the following steps:
S1, user is obtained in real time in first action event in the first scraping award region to scraping award；
The first action event that S2, basis obtain in real time, parsing obtain user in the scraping award path institute in the first scraping award region
The the second scraping award region formed；
S3, the filling format for removing the second scraping award region, correspondence show the first picture；First picture is prize drawing knot
Fruit；
Wherein, first scraping award region is drawn by following steps and is obtained:
The first picture is drawn on Canvas painting canvas；
It is filled on Canvas painting canvas according to preset filling format, obtain covering first picture first is scraped
Encourage region.
In this method, after drawing the first picture for representing drawing outcomes on Canvas painting canvas in advance, according to default
Filling format be filled on Canvas painting canvas, cover the first picture, thus obtain the first scraping award region after, can basis
For user in the real-time action event in the first scraping award region, the scraping award path that parsing obtains user is formed by the second scraping award area
Domain shows drawing outcomes to accordingly remove the filling format in the second scraping award region.This programme is carried out based on Canvas painting canvas
Electronics scraping award shown using the form of bitmap, occupies that memory space is smaller, and the speed of service is fast, ensure that and user
Good Interactive Experience.
And this programme is after forming corresponding second scraping award region according to the scraping award path of user, then removes second and scrape
The mode of the filling format in region is encouraged to show drawing outcomes, pumping can be accurately shown according to the region of user's practical operation
Prize is as a result, further improve the Interactive Experience with user.
This method can be used in various internet scraping awards, such as the integral scraping award after payment APP payment, shopping APP purchase
Reward scraping award or the lottery ticket scraping award such as scratch card gift of lottery ticket on-line selling industry after object, etc..It is realized with this method color
The demand of people's lottery can be improved in ticket scratch card gift, so that purchase lottery ticket is more interesting.
It is further used as preferred embodiment, when drawing the first scraping award region, encapsulates a variety of drawing by obtaining
The context object of function is drawn, and obtains context object especially by getContext () method, so that building exists
The environment drawn on Canvas painting canvas.
It is further used as preferred embodiment, first action event includes mouse event and HTML event.First
Action event, which is used to extract, obtains user in the operation data in the first scraping award region.Here, correspondingly, corresponding use mouse event
Or HTML event come identify obtain user operation data.
It is further used as preferred embodiment, when first action event is mouse event, the step S1, specifically
Are as follows:
User is obtained in real time in the mouse event in the first scraping award region to scraping award, and is detecting that mouse starts to move
When, judge that the operation object of the mouse is the end PC or intelligent mobile terminal, if the end PC, then mouse event uses mouse thing
Part, otherwise if intelligent mobile terminal, then mouse event uses touch event.
When user uses the end PC, show as carrying out scraping award by the way of traditional mouse action, then mouse thing
Part uses mouse event.When user uses intelligent mobile terminal, it is expressed as carrying out scraping award operation using touch manner, then mouse
Mark event is corresponding to use touch event.
It is further used as preferred embodiment, the step S2 is specifically included:
According to the first action event obtained in real time, initial position when mouse starts mobile is obtained, and according to mouse
Real-time movement routine obtains user in the scraping award path in the first scraping award region；
The second scraping award region is correspondingly formed according to scraping award path.
After obtaining initial position when mouse starts mobile, in the real-time moving process of mouse, by obtaining mouse
Real time position obtains real-time movement routine, to obtain the scraping award path in the first scraping award region of user.Here, mouse
Position is indicated using relative coordinate.
It is further used as preferred embodiment, described the step of second scraping award region is correspondingly formed according to scraping award path,
Its specifically:
According to scraping award path, after the enclosed region that corresponding generation scraping award path is constituted, the enclosed region of generation is made
For the second scraping award region.
This programme is by being used as the second scraping award region, the second scraping award area of subsequent removing after scraping award path is formed enclosed region
The filling format in domain shows scraping award as a result, avoiding where just user in the prior art scrapes where this mode can be led for display
The case where showing the region not scraped in advance of cause, ensure that good Interactive Experience sense.
It is further used as preferred embodiment, further comprising the steps of between the step S1 and S2:
A single sub path is created by beginPath () method, the first action event of the user obtained in real time is directed toward
It is handled on the subpath newly-built to this；
It is further comprising the steps of after the step S2:
Pass through the subpath that closePath () method closure is newly-built.
In the present embodiment, after creating a single sub path by beginPath () method, realize that figure is drawn on the subpath
System, and after drafting, by the subpath that closePath () method closure is newly-built, so that Graphic drawing commands return again
Into Canvas painting canvas.The data processing speed of user's scraping award process can be improved, efficiently, quickly.
Further, the preset filling format includes preset the fill style and Graphicxtras Frames Collection.In general, sample is filled
Formula is set as the rectangular area of filling grey, and Graphicxtras Frames Collection is then configured according to user preference, can also be in various festivals or holidays
Front and back scraping award experience sense is improved using the Graphicxtras Frames Collection with festivals or holidays feature.
System embodiment
Referring to Fig. 2, a kind of electronics scraping award system based on Canvas is present embodiments provided, comprising:
Acquisition module, for obtaining user in real time in first action event in the first scraping award region to scraping award；
Parsing module, for according to the first action event obtained in real time, parsing to obtain user in the first scraping award region
Scraping award path is formed by the second scraping award region；
Scraping award module, for removing the filling format in the second scraping award region, correspondence shows the first picture；First figure
Piece is drawing outcomes；
Wherein, acquisition is drawn in first scraping award region in the following manner:
The first picture is drawn on Canvas painting canvas；
It is filled on Canvas painting canvas according to preset filling format, obtain covering first picture first is scraped
Encourage region.
A kind of electronics scraping award system based on Canvas of the present embodiment can be performed provided by embodiment of the present invention method
A kind of electronics scraping award method based on Canvas, any combination implementation steps of executing method embodiment have this method phase
The function and beneficial effect answered.
Installation practice
Referring to Fig. 3, a kind of electronics scraping award device based on Canvas is present embodiments provided, comprising:
At least one processor 100；
At least one processor 200, for storing at least one program；
When at least one described program is executed by least one described processor 100, so that at least one described processor
100 realize a kind of electronics scraping award method based on Canvas.
A kind of electronics scraping award device based on Canvas of the present embodiment can be performed provided by embodiment of the present invention method
A kind of electronics scraping award method based on Canvas, any combination implementation steps of executing method embodiment have this method phase
The function and beneficial effect answered.
It is to be illustrated to preferable implementation of the invention, but the invention is not limited to the implementation above
Example, those skilled in the art can also make various equivalent variations on the premise of without prejudice to spirit of the invention or replace
It changes, these equivalent variation or replacement are all included in the scope defined by the claims of the present application.
Claims (10)
1. a kind of electronics scraping award method based on Canvas, which comprises the following steps:
S1, user is obtained in real time in first action event in the first scraping award region to scraping award；
The first action event that S2, basis obtain in real time, parsing obtain user and are formed in the scraping award path in the first scraping award region
The second scraping award region；
S3, the filling format for removing the second scraping award region, correspondence show the first picture；First picture is drawing outcomes；
Wherein, first scraping award region is drawn by following steps and is obtained:
The first picture is drawn on Canvas painting canvas；
It is filled on Canvas painting canvas according to preset filling format, obtains the first scraping award area for covering first picture
Domain.
2. a kind of electronics scraping award method based on Canvas according to claim 1, which is characterized in that scraped in drafting first
When encouraging region, drawn by the context object that acquisition encapsulates a variety of drawing functions.
3. a kind of electronics scraping award method based on Canvas according to claim 1, which is characterized in that first operation
Event includes mouse event and HTML event.
4. a kind of electronics scraping award method based on Canvas according to claim 3, which is characterized in that first operation
When event is mouse event, the step S1, specifically:
User is obtained in real time in the mouse event in the first scraping award region to scraping award, and when detecting that mouse starts mobile, is sentenced
The operation object of the mouse of breaking is the end PC or intelligent mobile terminal, and if the end PC, then mouse event uses mouse event, instead
If intelligent mobile terminal, then mouse event uses touch event.
5. a kind of electronics scraping award method based on Canvas according to claim 4, which is characterized in that the step S2,
It specifically includes:
According to the first action event obtained in real time, initial position when mouse starts mobile is obtained, and according to the real-time of mouse
Movement routine obtains user in the scraping award path in the first scraping award region；
The second scraping award region is correspondingly formed according to scraping award path.
6. a kind of electronics scraping award method based on Canvas according to claim 5, which is characterized in that described according to scraping award
Path is correspondingly formed the step of the second scraping award region, specifically:
According to scraping award path, it is corresponding generate the enclosed region that the scraping award path is constituted after, using the enclosed region of generation as the
Two scraping award regions.
7. a kind of electronics scraping award method based on Canvas according to claim 1, which is characterized in that the step S1 and
It is further comprising the steps of between S2:
A single sub path is created by beginPath () method, the first action event of the user obtained in real time is directed to this
It is handled on newly-built subpath；
It is further comprising the steps of after the step S2:
Pass through the subpath that closePath () method closure is newly-built.
8. a kind of electronics scraping award method based on Canvas according to claim 1-7, which is characterized in that described
Preset filling format includes preset the fill style and Graphicxtras Frames Collection.
9. a kind of electronics scraping award system based on Canvas characterized by comprising
Acquisition module, for obtaining user in real time in first action event in the first scraping award region to scraping award；
Parsing module, for according to the first action event obtained in real time, parsing to obtain user in the scraping award in the first scraping award region
Path is formed by the second scraping award region；
Scraping award module, for removing the filling format in the second scraping award region, correspondence shows the first picture；First picture is
Drawing outcomes；
Wherein, acquisition is drawn in first scraping award region in the following manner:
The first picture is drawn on Canvas painting canvas；
It is filled on Canvas painting canvas according to preset filling format, obtains the first scraping award area for covering first picture
Domain.
10. a kind of electronics scraping award device based on Canvas characterized by comprising
At least one processor；
At least one processor, for storing at least one program；
When at least one described program is executed by least one described processor, so that at least one described processor is realized as weighed
Benefit requires a kind of described in any item electronics scraping award methods based on Canvas of 1-8.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201810882869.1A CN109254705A (en) | 2018-08-06 | 2018-08-06 | A kind of electronics scraping award method, system and device based on Canvas |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201810882869.1A CN109254705A (en) | 2018-08-06 | 2018-08-06 | A kind of electronics scraping award method, system and device based on Canvas |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN109254705A true CN109254705A (en) | 2019-01-22 |
Family
ID=65049206
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201810882869.1A Pending CN109254705A (en) | 2018-08-06 | 2018-08-06 | A kind of electronics scraping award method, system and device based on Canvas |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN109254705A (en) |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN110162728A (en) * | 2019-04-03 | 2019-08-23 | 阿里巴巴集团控股有限公司 | Determine the method, apparatus and electronic equipment of electronics scratch card scratch-off area accounting |
| CN112612398A (en) * | 2020-12-25 | 2021-04-06 | 珠海金山网络游戏科技有限公司 | Data processing method and device |
-
2018
- 2018-08-06 CN CN201810882869.1A patent/CN109254705A/en active Pending
Cited By (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN110162728A (en) * | 2019-04-03 | 2019-08-23 | 阿里巴巴集团控股有限公司 | Determine the method, apparatus and electronic equipment of electronics scratch card scratch-off area accounting |
| CN110162728B (en) * | 2019-04-03 | 2023-05-02 | 创新先进技术有限公司 | Method and device for determining scraping area ratio of electronic scraping card and electronic equipment |
| CN112612398A (en) * | 2020-12-25 | 2021-04-06 | 珠海金山网络游戏科技有限公司 | Data processing method and device |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN102939575B (en) | Ink presents | |
| CN104937525B (en) | Use the content operation of slip gesture identification technology | |
| CN108305325A (en) | The display methods and device of virtual objects | |
| US8902235B2 (en) | Methods and systems for representing complex animation using scripting capabilities of rendering applications | |
| US9928637B1 (en) | Managing rendering targets for graphics processing units | |
| US20160328736A1 (en) | Interactive method, client device, mobile terminal and server | |
| CN105183477B (en) | Application program virtual item Information Acquisition System and acquisition methods | |
| CN105975393B (en) | Page display detection method and system | |
| US20230362438A1 (en) | Resource interacting method, apparatus, computer device, and readable storage medium | |
| CN107169135B (en) | Image processing method and device and electronic equipment | |
| WO2022057722A1 (en) | Program trial method, system and apparatus, device and medium | |
| CN102306174A (en) | Method and equipment for interacting with user based on web page elements | |
| CN109254705A (en) | A kind of electronics scraping award method, system and device based on Canvas | |
| EP2387850A1 (en) | Video-associated objects | |
| WO2014036927A1 (en) | Method and device for implementing page mask | |
| CN103870508B (en) | A kind of webpage Zoom method, device and system | |
| CN111643890A (en) | Card game interaction method and device, electronic equipment and storage medium | |
| CN106447756B (en) | Method and system for generating user-customized computer-generated animations | |
| CN108635851B (en) | Game picture processing method and device | |
| CN114185466A (en) | Service processing method and device, electronic equipment and storage medium | |
| CN110598700A (en) | Object display method and device, storage medium and electronic device | |
| CN109636885A (en) | A kind of sequence frame animation method and system for the H5 page | |
| CN109725802B (en) | Page interaction method and device | |
| CN102880465A (en) | Embedded image method based on open graphics library for embedded systems (OpenGL ES) | |
| CN113301441B (en) | Application program interaction method and device and electronic equipment |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| WD01 | Invention patent application deemed withdrawn after publication | ||
| WD01 | Invention patent application deemed withdrawn after publication |
Application publication date: 20190122 |