Classic! HTML5 Canvas simulates the fragable fabric effect, html5canvas

Classic! HTML5 Canvas simulates the fragable fabric effect, html5canvas

This is an HTML5 Canvas application demonstration that simulates the effect of torn fabric. You will see thatCanvasWith the powerful drawing and animation functions, you can achieve the effect with little code.

Tip: to ensure the best results, visit modern browsers such as IE10 +, Chrome, Firefox, and Safari.

 

 

Demo of source code download

 

Articles you may be interested in

• 10 useful results in Web development [Source Code download]
• Excellent jQuery Ajax paging plug-ins and tutorials carefully selected
• 12 amazing creative 404 error page Designs
• Let the website get started! 12 excellent jQuery animation plug-ins
• Amazing 8 HTML5 & JavaScript Special Effects

 

Link to this article: Classic effect! HTML5 Canvas simulates the effect of torn fabric

Source: Dream sky ◆ focus on front-end development technology ◆ share web design resources

Canvas in Html5: I set the size of the Canvas to 100*304 PX, but it changed to * 154px during browser preview?

Parent:
Set the length and width of the canvas as follows: <canvas width = "100" height = "100"> </canvas>

Remove the # nh {width: 100; height: 100;} css settings.

Tip:
1. Another point is that when setting css, a unit is required for the length and width, for example, # nh {width: 100px; height: 100px ;}

2. js statements. Add semicolons to the backend to form a good habit.

How does the HTML5 canvas lineTO () method draw lines of different thicknesses and colors in the same canvas?

Var canvasDom = $ ("myCanvas ");
Var myDraw1 = new Draw (canvasDom );
$ ("Button_line"). onclick = function (){
CanvasDom. onmousemove = function (e ){
MyDraw1.drawLine (e );
}
}
$ ("Button_line_width"). onclick = function (){
MyDraw1.setLineWidth ($ ("text_line_width"). value );
}
$ ("Button_choose_color"). onclick = function (){
MyDraw1.chooseColor ($ ("text_choose_color"). value );
}
Function Draw (canvasDom ){
Var mouseX, mouseY, mx, my;
Var pd = false;
Var coordinate = function (e ){
MouseX = e. pageX-canvasDom.offsetLeft;
MouseY = e. pageY-canvasDom.offsetTop;
}
CanvasDom. onmousedown = function (e ){
Coordinate (e );
Pd = true;
Mx = mouseX;
My = mouseY;
Ctx. save ();
}
CanvasDom. onmousemove = function (e ){
DrawLine (e );
}
CanvasDom. onmouseup = function (e ){
Pd = false;
}
This. drawLine = function (e ){
Coordinate (e );
If (pd = true ){
Ctx. save ();
Ctx. beginPath ();
Ctx. moveTo (mx, my );
Ctx. lineTo (mouseX, mouseY );
Ctx. closePath ();
Ctx. stroke ();
Mx = mouseX;
My = mouseY;
}
}
This. setLineWidth = function (lw) {ctx. lineWidth = lw ;}
This. chooseColor = function (c) {ctx. strokeStyle = c ;}

<! -- Html -->

<Canvas id = "myCanvas" width = "400" height = "400" style = "border: solid 1px #000;"> </canvas> <br>
<Input type = "button" value = "Draw line" id = "button_line">
<Input type = "text" ...... remaining full text>