HTML5怎么实现波的效果

本文小编为大家详细介绍“HTML5怎么实现波的效果”，内容详细，步骤清晰，细节处理妥当，希望这篇“html5怎么实现波的效果”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。

一.简介

波，在空间以特定形式传播的物理量或物理量的扰动。由于是以特定的形式传播，这个物理量（或其扰动，下同）成为空间位置和时间的函数,而且是这样的函数,即在时间t出现在空间r处周围的分布,会在时间(t+t┡)出现在空间(r+vt┡)的周围。 v一般说是个常矢量,就是有关物理量（或其扰动）的传播速度。物理量函数称为波函数，数学上它是一个叫波动方程的在特定边界条件下的解。

物理定义：某一物理量的扰动或振动在空间逐点传递时形成的运动。不同形式的波虽然在产生机制、传播方式和与物质的相互作用等方面存在很大差别，但在传播时却表现出多方面的共性，可用相同的数学方法描述和处理。

二.实现

波是由无数的点组成，每个点有着自己的运动方向和速度大小。为了实现波的效果，我们首先模拟波上的点：

javascript Code复制内容到剪贴板

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; i++) {  

            index = Math.round(Math.random() * 15);  

            strHex += arrHex[index];  

        }  

        return strHex;  

    }  

效果如下：

image 

然后我们让波上的每个点回到某一时刻它该回到的位置：

JavaScript Code复制内容到剪贴板

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();  

效果如下：

image

然后我们利用jscex实现动画效果：

JavaScript Code复制内容到剪贴板

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(100))  

        draw();  

    }  

}))  

waveAsync().start();  

读到这里，这篇“HTML5怎么实现波的效果”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注编程网VUE频道。