Home > Developer > Web Develop
Implementation method:
(1) using the canvas canvas,fillRect () depicts a rectangle (not transparent), positioning the lid on a tag such as a div (this tag says the winning information)
(2) globalcompositeoperation = ' destination-out '; With this property, the finger is drawn across the canvas,arc (x, y, radius, 0, math.pi*2, true) draw the Circle, Then this circle will penetrate the rectangle that was previously depicted and see the contents of the DIV tag
Globalcompositeoperation Properties:
The Globalcompositeoperation property sets or returns how a source (new) image is drawn to the target (existing) image.
SOURCE image = The drawing you intend to place on the canvas.
Target image = The drawing you have placed on the canvas.
| value | description |
|---|---|
| source-over | default. Displays the source image on the target image. |
| source-atop | Displays the source image at the top of the target image. The portion of the source image that is outside the target image is not visible. |
| source-in | Displays the source image in the target image. Only the portion of the source image within the target image is displayed, and the target image is transparent. |
| source-out | Displays the source image outside of the target image. Only the source image portion outside the target image is displayed, and the target image is transparent. |
| destination-over | Displays the target image above the source image. |
| destination-atop | Displays the target image at the top of the source image. The part of the target image that is outside the source image is not displayed. |
| destination-in | Displays the target image in the source image. Only the portion of the target image within the source image is displayed, and the source image is transparent. |
| destination-out | to display the target image outside of the source image. Only the part of the target image that is outside the source image is displayed, and the source image is transparent. |
| lighter | Displays the source image + target image. |
| copy | displays the source image. ignores the target image. |
| source-over | combines the source image with the target image using an XOR operation. |
For example, Blue is the target image (that is, the rectangle), and red is the source image (that is, the circle with the finger)
As you can see, globalcompositeoperation = ' destination-out ' is the attribute we want
Example complete code:
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Demo</title> <Metaname= "Viewport"content= "Width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/> <styletype= "Text/css">. Wraper{width:300px;Height:100px;position:relative;margin:150px Auto;}. Inner{width:300px;Height:100px;background:#AA0707;Color:#fff;font-size:36px;Line-height:100px;text-align:Center;}#j_canvas{position:Absolute; Left:0;Top:0;} </style></Head><Body> <Divclass= "Wraper"> <Divclass= "inner">Congratulations on your winning</Div> <CanvasID= "J_canvas"width= "+"Height= "+"></Canvas> </Div> <Scripttype= "Text/javascript"> varScratchgame= (function(){ varTarget=document.getElementById ('J_canvas'), CTX=Target.getcontext ('2d'), W=target.width, H=target.height, Radius= the, target_offset_x=Target.getboundingclientrect (). Left, target_offset_y=Target.getboundingclientrect (). Top, Istouch= false; return{init:function() {Ctx.fillstyle= '#999'; Ctx.fillrect (0, 0, w,h); //property Sets or returns how a source (new) image is drawn to the target (existing) image. ctx.globalcompositeoperation= 'Destination-out'; //EventsTarget.addeventlistener ('Touchstart', This. Eventdown,false); Target.addeventlistener ('Touchmove', This. Eventmove,false); Target.addeventlistener ('Touchend', This. Eventup,false); }, Eventdown:function(e) {e.preventdefault (); Istouch= true; }, Eventup:function(e) {e.preventdefault (); Istouch= false; }, Eventmove:function(e) {e.preventdefault (); if(!Istouch||!e.touches.length)return; varTouch=e.touches[0], x=Touch.pagex-target_offset_x, y=Touch.pagey-target_offset_y; Ctx.beginpath (); Ctx.arc (x, y, radius,0, Math.PI*2, true); Ctx.fill (); } } })(); Scratchgame.init (); </Script></Body></HTML>
Html5-canvas Example: Scratch Games
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
