Making paper-cut effects with canvas

Before doing the paper-cut effect, first introduce the paper-cut effect applied to some knowledge:

1. Shadows:

When drawing in canvas, you can specify a shadow effect by modifying the following 4 property values in the drawing environment:

• The color string in the SHADOWCOLOR:CSS format. The default value is Rgba (0,0,0,0), which is completely transparent black.
• Shadowoffsetx: The offset of the shadow in the x-axis direction, in pixels. The default value is 0
• Shadowoffsety: The offset, in pixels, of the shadow in the y-axis direction. The default value is 0
• Shadowblur: A double value that represents how the shadow effect extends. The default value is 0. This value is used in the Gaussian blur equation to obfuscate the shadow.

If you meet the criteria, you can draw a shadow effect using the canvas's drawing environment object:

1. The specified Shadowcolor value is not fully transparent.
2. In the rest of the shadow properties, there is a value other than 0

However, in general, it is a good idea to use translucent colors to draw shadows, as the background can be displayed through shadows.

If you want to disable the shadow effect, set the Shadowcolor property to underfined.

If you set a positive value other than 0 for the Shadowoffsetx and Shadowoffsety properties, and whatever you draw, it looks like it floats on top of the canvas, and the larger the value of those properties, the higher it floats on the canvas. Negative offsets can be used to create an inline shadow effect.

2. Non-0 surround principle

Before introducing the non-0 surround criterion, first introduce the arc () method in the canvasrenderingcontext2d that is related to the path. The arc () method adds a sub-path to the current path that represents an arc or circle, and you can control the direction of the path by a Boolean parameter. If this parameter is true, then the sub-path created by arc () is clockwise, otherwise it is counterclockwise.

If the current path is circular, or contains multiple intersecting sub-paths, then the canvas's drawing variables must be judged.

The non-0 wrapping principle refers to a segment that is long enough to be drawn from within the region for any given area in the path, so that the end of the segment falls completely outside the path range. , the three arrows describe this step. Next, initialize the counter to 0, and then change the value of the counter whenever the segment intersects a line or curve on the path. If it intersects the clockwise part of the path, add 1, minus 1 if it intersects the counterclockwise part of the path. If the final value of the counter is not 0, then the area is inside the path, and the browser populates it when the fill () method is called. If the final value is 0, then the area is not inside the path and the browser does not populate it.

The following describes the paper-cut effect:

A picture of the effect of a paper cut.

The paper-cut effect consists of two circles, one of which is rounded inside the other. By setting the last parameter of the arc () method, the program draws the inner circle in a clockwise direction and draws the perimeter circle in a counterclockwise direction. The browser uses a "non-0 surround rule" to fill the interior of the perimeter circle, but the padding does not include the circle inside, which results in a paper-cut pattern.

The code is as follows:

1 varCanvas = document.getElementById ("Canvas"),2context = Canvas.getcontext (' 2d ');3 //Function-------------------------------------------------4 functionDrawtwoarcs () {5 Context.beginpath ();6Context.arc (300,190,150,0,math.pi*2,false);7Context.arc (300,190,100,0,math.pi*2,true);8 9 Context.fill ();TenContext.shadowcolor =undefined; OneContext.shadowoffsetx = 0; Acontext.shadowoffsety = 0; - Context.stroke (); - } the functionDraw () { -Context.clearrect (0,0, canvas.width,canvas.height); - Context.save (); -  +Context.shadowcolor = ' Rgba (0,0,0,0.8) '; -Context.shadowoffsetx = 12; +Context.shadowoffsety = 12; AContext.shadowblur = 15; at  - Drawtwoarcs (); - Context.restore (); - } -  - //initialzation--------------------------------------------------------------- inContext.fillstyle = ' Rgba (100,140,230,0.5) '; -Context.strokestyle =Context.fillstyle; toDraw ();

View Code

Making paper-cut effects with canvas