How to make dynamic thousand paper cranes with html+css+js
This article introduces the relevant knowledge of "how to use html+css+js to make dynamic paper cranes". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!
HTML code
Html part of the code is relatively simple, introduced a block, set the CSS style
HTML5 Canvas thousand paper crane animation special effects
CSS code
* {margin:0; padding:0;}
Html, body {width:100%; height:100%; overflow: hidden; background:black;}
Canvas {display:block;}
# controls {
Z-index: 2
Margin: 20px
Position: absolute
Top: 0; left: 0
Color: white
}
Js partial code
Index.js
Function randColor (base = 0, amt=.2) {
Return [(base+random (amt)-amt/2)% 1, .2 + random (amt), .8 + random (amt)]
}
Function setup () {
PixelDensity (1)
CreateCanvas ()
ColorMode (HSB, 1,1,1)
WindowResized ()
}
Function init () {
Birds = []
For (let I = 0; I
< numBirds; i++) birds.push(new Bird()); birds = birds.sort((a,b) =>A.size-b.size)
}
Function draw () {
Background (0, .5)
Birds.map (b = > b.render ())
}
Function mousePressed () {windowResized ();}
Function windowResized () {
ResizeCanvas (windowWidth, windowHeight)
Init ()
}
This is the end of the content of "how to use html+css+js to make dynamic paper cranes". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!
