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.