怎樣使用HTML5 Canvas創建動態粒子網格動畫

小編給大家分享一下怎樣使用HTML5 Canvas創建動態粒子網格動畫，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

添加一個canvas了：

　　下面是樣式：

　　#canvas{

　　position: absolute;

　　display: block;

　　left:0;

　　top:0;

　　background: #0f0f0f;

　　z-index: -1;

　　}

　　上面canvas的z-index: -1的作用是可以放在一些元素的下面當做背景。

　　為了確保canvas能夠充滿整個瀏覽器，所以要將canvas的寬高設置成和瀏覽器一樣：

　　function getSize(){

　　w = canvas.width = window.innerWidth;

　　h = canvas.height = window.innerHeight;

　　}

　　上面w和h分別代表瀏覽器的寬高。

　　獲得了瀏覽器的寬高，接下來就是在里面畫粒子了，這里我們需要提前定義一些粒子的參數：

　　var opt = {

　　particleAmount: 50, //粒子個數

　　defaultSpeed: 1, //粒子運動速度

　　variantSpeed: 1, //粒子運動速度的變量

　　particleColor: "rgb(32,245,245)", //粒子的顏色

　　lineColor:"rgb(32,245,245)", //網格連線的顏色

　　defaultRadius: 2, //粒子半徑

　　variantRadius: 2, //粒子半徑的變量

　　minDistance: 200 //粒子之間連線的最小距離

　　};

　　上面的速度變量和半徑變量都是為了保證粒子的大小和速度不是一模一樣。

　　然后我們再創建一個類用來初始化粒子，代碼比較長，我都加了注釋：

　　function Partical(){

　　this.x = Math.random()*w; //粒子的x軸坐標

　　this.y = Math.random()*h; //粒子的y軸坐標

　　this.speed = opt.defaultSpeed + opt.variantSpeed*Math.random(); //粒子的運動速度

　　this.directionAngle = Math.floor(Math.random()*360); //粒子運動的方向

　　this.color = opt.particleColor ; //粒子的顏色

　　this.radius = opt.defaultRadius+Math.random()*opt.variantRadius; //粒子的半徑大小

　　this.vector = {

　　x:this.speed * Math.cos(this.directionAngle), //粒子在x軸的速度

　　y:this.speed * Math.sin(this.directionAngle) //粒子在y軸的速度

　　}

　　this.update = function(){ //粒子的更新函數

　　this.border(); //判斷粒子是否到了邊界

　　this.x += this.vector.x; //粒子下一時刻在x軸的坐標

　　this.y += this.vector.y; //粒子下一時刻在y軸的坐標

　　}

　　this.border = function(){ //判斷粒子是都到達邊界

　　if(this.x >= w || this.x<= 0){ //如果到達左右邊界，就讓x軸的速度變為原來的負數

　　this.vector.x *= -1;

　　}

　　if(this.y >= h || this.y <= 0){ //如果到達上下邊界，就讓y軸的速度變為原來的負數

　　this.vector.y *= -1;

　　}

　　if(this.x > w){ //下面是改變瀏覽器窗口大小時的操作，改變窗口大小后有的粒子會被隱藏，讓他顯示出來即可

　　this.x = w;

　　}

　　if(this.y > h){

　　this.y = h;

　　}

　　if(this.x < 0){

　　this.x = 0;

　　}

　　if(this.y < 0){

　　this.y = 0;

　　}

　　}

　　this.draw = function(){ //繪制粒子的函數

　　ctx.beginPath();

　　ctx.arc(this.x, this.y, this.radius ,0 ,Math.PI * 2);

　　ctx.closePath();

　　ctx.fillStyle = this.color;

　　ctx.fill();

　　}

　　}

以上是“怎樣使用HTML5 Canvas創建動態粒子網格動畫”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！