In addition to Weibo, there is also WeChat
Please pay attention
WeChat public account
Shulou
2025-01-15 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >
Share
Shulou(Shulou.com)06/01 Report--
In this article, the editor introduces in detail "how to achieve the effect of wave in HTML5". The content is detailed, the steps are clear, and the details are handled properly. I hope that this article "how to achieve the effect of wave in HTML5" can help you solve your doubts.
one。 Brief introduction
A wave, a disturbance of a physical quantity or physical quantity that propagates in a particular form in space. Because it propagates in a specific form, this physical quantity (or its disturbance, the same below) becomes a function of space location and time, and it is such a function that the distribution around space r in time t appears around space ┡ in time (t ┡). V is generally a constant vector, which is the propagation velocity of physical quantities (or their disturbances). The physical quantity function is called the wave function, and mathematically it is the solution of a wave equation under specific boundary conditions.
Physical definition: the motion formed when the disturbance or vibration of a physical quantity is transmitted point by point in space. Although different forms of waves have great differences in generation mechanism, mode of propagation and interaction with matter, they show many commonalities in propagation and can be described and dealt with by the same mathematical method.
two。 Realize
Waves are made up of countless points, each of which has its own direction and speed of motion. In order to achieve the effect of the wave, we first simulate the points on the wave:
JavaScript Code copies content to the clipboard
Var c = document.getElementById ("myCanvas")
Var cxt = c.getContext ("2d")
Var angel = 2 * Math.PI
Var step = Math.PI / 10
Function draw () {
Cxt.clearRect (0, 0, 1000, 1000)
For (var I = 0; I < 600; I + = 10) {
Cxt.fillStyle = randomColor ()
Cxt.beginPath ()
Angel-= step
Cxt.arc (I, 100,7,0, Math.PI * 2, true)
Cxt.closePath ()
Cxt.fill ()
}
}
Draw ()
Function randomColor () {
Var arrHex = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "A", "B", "C", "D", "E", "F"]; var strHex = "#"
Var index
For (var I = 0; I < 6; iTunes +) {
Index = Math.round (Math.random () * 15)
StrHex + = arrHex [index]
}
Return strHex
}
The effect is as follows:
Image
And then we get every point on the wave back to where it should be at some point:
JavaScript Code copies content to the clipboard
Var c = document.getElementById ("myCanvas")
Var cxt = c.getContext ("2d")
Var angel = 2 * Math.PI
Var step = Math.PI / 10
Function draw () {
Cxt.clearRect (0, 0, 1000, 1000)
For (var I = 0; I < 600; I + = 10) {
Cxt.fillStyle = randomColor ()
Cxt.beginPath ()
Angel-= step
Cxt.arc (I, 150 + 100 * Math.cos (angel), 7,0, Math.PI * 2, true)
Cxt.closePath ()
Cxt.fill ()
}
}
Draw ()
The effect is as follows:
Image
Then we use Jscex to achieve animation:
JavaScript Code copies content to the clipboard
Var c = document.getElementById ("myCanvas")
Var cxt = c.getContext ("2d")
Var angel = 2 * Math.PI
Var step = Math.PI / 10
Function draw () {
Cxt.clearRect (0, 0, 1000, 1000)
For (var I = 0; I < 600; I + = 10) {
Cxt.fillStyle = randomColor ()
Cxt.beginPath ()
Angel-= step
Cxt.arc (I, 150 + 100 * Math.cos (angel), 7,0, Math.PI * 2, true)
Cxt.closePath ()
Cxt.fill ()
}
}
Var step2 = 0.2
Var waveAsync = eval (Jscex.compile ("async", function () {
While (true) {angel = 2 * Math.PI
Angel-= step2
Step2 + = 0.1
$await (Jscex.Async.sleep)
Draw ()
}
}))
WaveAsync () .start ()
After reading this, the article "how to achieve the wave effect of HTML5" has been introduced. If you want to master the knowledge points of this article, you still need to practice and use it yourself. If you want to know more about related articles, welcome to follow the industry information channel.
Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.
Views: 0
*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.
Continue with the installation of the previous hadoop.First, install zookooper1. Decompress zookoope
"Every 5-10 years, there's a rare product, a really special, very unusual product that's the most un
© 2024 shulou.com SLNews company. All rights reserved.