HTML5怎么實現有趣的海浪效果

今天小編給大家分享一下HTML5怎么實現有趣的海浪效果的相關知識點，內容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

　　1、創建觸發條件（按鈕）

　　="Beisizer（）"//點擊時觸發JS事件

　　οnmοuseοver="bcd（）"//鼠標經過時JS事件

　　οnmοuseleave="out（）"//鼠標離開時JS事件

　　id="Anniu">確&nbsp?&nbsp&nbsp&nbsp&nbsp&nbsp?&nbsp&nbsp&nbsp&nbsp定

　　2、創建畫布Canvas

　　3、創建JS事件（屬性設置）//獲取畫布

　　var?beisizer?=?document.getElementById（"Theback"）;?var?ContenofBeisizer?=?beisizer.getContext（"2d"）;?//設置波浪海域（海浪寬度，高度）

　　var?beisizerwidth?=?beisizer.width;?var?beisizerheight?=?beisizer.height;?var?beisizerlinewidth?=?2;//曲線

　　var?sinX?=?0;?var?sinY?=?beisizerheight/2.0;//軸長

　　var?axisLenght?=?beisizerwidth;//弧度寬度

　　var?waveWidth?=?0.014;//海浪高度

　　var?waveHeight?=?beisizerheight?/?15.0;

　　ContenofBeisizer.lineWidth?=?beisizerlinewidth;

　　4、畫貝塞爾曲線var?drawSin?=?function?（xofspeed）？{

　　ContenofBeisizer.save（）;//存放貝塞爾曲線的各個點

　　var?points?=?[];

　　ContenofBeisizer.beginPath（）;//創建貝塞爾點

　　for?（var?x?=?sinX;x?

　　var?y?=?-Math.sin（（sinX+x）*waveWidth+xofspeed）;//?points.push（[x,sinY?+?y?*?waveHeight]）;?測試請解開注釋，注釋下一行

　　points.push（[x,rand+y*waveHeight]）;

　　//ContenofBeisizer.lineTo（x,sinY?+?y?*?waveHeight）;測試請解開注釋，注釋下一行

　　ContenofBeisizer.lineTo（x,rand?+?y?*?waveHeight）;

　　}

　　ContenofBeisizer.lineTo（axisLenght,beisizerheight）;

　　ContenofBeisizer.lineTo（sinX,beisizerheight）;

　　ContenofBeisizer.lineTo（points[0][0],points[0][1]）;

　　ContenofBeisizer.stroke（）;

　　ContenofBeisizer.restore（）;?//貝塞爾曲線樣式設置

　　ContenofBeisizer.strokeStyle?=?"#3bc777";

　　ContenofBeisizer.fillStyle?=?"#3bc777";

　　ContenofBeisizer.fill（）;

　　};這一段代碼已經完成靜態貝賽爾曲線的繪制了，可以通過解開以下語句嘗試運行看下效果。

　　var y = -Math.sin（（sinX+x）*waveWidth）;

　　points.push（[x,rand+y*waveHeight]）;

　　var y = -Math.sin（（sinX+x）*waveWidth+xofspeed）;

　　運行方法執行 drawSin（）

　　靜態貝塞爾曲線。png

　　5、海浪效果的實現

　　需要在屬性中加入一下代碼進行速率的設置

　　var speed = 0.1; 數值越大速率越快

　　var xofspeed = 0; ?波浪橫向的偏移量

　　var rand = beisizerheight;波浪高度var?rendY?=?function?（）？{

　　ContenofBeisizer.clearRect（0,0,beisizerwidth,beisizerheight）;//控制海浪高度

　　var?tmp?=?0.1;

　　rand-=tmp;var?b?=?beisizerheight?-?rand;

　　//控制循環漲潮

　　if?（parseInt（b）==beisizerheight）{

　　rand?=?beisizerheight;

　　}

　　drawSin（xofspeed）;

　　drawSinl（xofspeed）;

　　xofspeed?+=?speed;

　　requestAnimationFrame（rendY）;

　　};通過調用自身產生不同的高度，來產生海浪效果。這里設置的屬性值配合第四步畫貝塞爾曲線一起進行理解。

　　運行方式 rendY（）;

以上就是“HTML5怎么實現有趣的海浪效果”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。