北京赛车 pk10开奖记录_Toyou热购彩票官网
香港高速VIP雲機房火爆上線啦!無需備案戲,開通即用!配套《巔雲自助建站系統3.0》將帶給您飛一般的可視化拖拽建站體驗輪稀欠,歡迎免費體驗衫先錠。

建站新聞

canvas三角函數模擬水波效果的示例代碼
一佰互聯網站建設(www.yinxi.net) 發布時間廠︰2019-04-20 08:57:16 瀏覽數: 41
0

最近項目中朔,ui設計了個水波效果的背景動畫桂噶府,然而並沒有gif或svg動畫愧,開始試著用css實現了一下潑腥,動畫效果並不是很好梨郊,網上查了下基本都是用貝賽爾曲線實現巢臉仿,想起以看的各種前波形圖潭癸粒,于是想著用三角函數圖像初略模擬一下

一頭、繪制sin函數圖像

sin函數表達式如下皇,

y=Asin(wx+φ)+h

其中 A表示振幅鉛哺舶,ω表示角頻率(ω=2π/T,T為函數的周期)保,φ表示初相盼,h表示圖像向y軸正方向平移的長度 ;(這里需要注意一下珊︰h在數學學的本來是表示向上平移的泄扒,但在canvas中采用的是屏幕坐標系煩滌椿,即左上角為原點圃蔚,h則表示向下平移);

繪制代碼如下逼︰

(1)添加canvas標簽

<canvas id="canvas"></canvas>

(2)添加css樣式,設置canvas寬高

html,body {  padding: 0;  margin: 0;  width: 100%;  height: 100%;}canvas {  width: 100%;  height: 100%;}

(3)繪制函數圖像

var canvas = document.getElementById("canvas"),    ctx = canvas.getContext("2d"),    width = canvas.width = canvas.offsetWidth,    height = canvas.height = canvas.offsetHeight;//聲明參數var A=50,    W=1 / 50,    Q=0,    H= height / 2;//繪圖方法(function draw(){  ctx.clearRect(0, 0, width, height);//清空畫布  ctx.beginPath();                   //開始路徑  ctx.strokeStyle="#000";            //設置線條顏色  ctx.lineWidth = 1;                 //設置線條寬度  ctx.moveTo(0, height /2);          //起始點位置  for (let x = 0; x <=  width; x++) {// 繪制x對應y的     var y = A*Math.sin(W*x+Q) +H    ctx.lineTo(x, y)  }  ctx.stroke();                      //繪制路徑  ctx.closePath();                   //閉合路徑})()

這樣我們可以得到以下圖像疤︰

二興、為函數圖像添加動畫

上面得到的是是一個靜態的函數圖像動拾皇,而我們一般見到的的波形圖或水波都是隨時間連續變化的馳,這里就要用到上一步中的參數相位φ溉吧,(js即代碼中的Q) 同,我們將φ隨時間不斷增加或減邢畋┌ ,即可得到不同時間的不同圖像;使用window.requestAnimationFrame實現幀動畫;

修改以上代碼為鵝︰

var canvas = document.getElementById("canvas"),    ctx = canvas.getContext("2d"),    width = canvas.width = canvas.offsetWidth,    height = canvas.height = canvas.offsetHeight;//聲明參數var A=50,    W=1 / 50,    Q=0,    H= height / 2;//繪圖方法(function draw(){  ctx.clearRect(0, 0, width, height);//清空畫布  ctx.beginPath();                   //開始路徑  ctx.strokeStyle="#000";            //設置線條顏色  ctx.lineWidth = 1;                 //設置線條寬度  ctx.moveTo(0, height /2);          //起始點位置  for (let x = 0; x <=  width; x++) {// 繪制x對應y的     var y = A*Math.sin(W*x+Q) +H    ctx.lineTo(x, y)  }  ctx.stroke();                      //繪制路徑  ctx.closePath();                   //閉合路徑})()

效果如下(渣渣截圖軟件)銅傷︰

三碑嗎、繪制完整填充路徑

以上路徑雖有閉合苛,但卻不滿足我們需要填充的部分淒久孿,直接填充效果如下精椽聖︰

完整填充路徑應如圖所示虎餞︰

閉合路徑後創建一個漸變顏色和繁,作為填充顏色枯非領,代碼如下桐惋狼︰

var lingrad = ctx.createLinearGradient(0,0,width,0); lingrad.addColorStop(0, "rgba(0,186,128,0.8)"); lingrad.addColorStop(1, "rgba(111,224,195,1)");   (function draw(){  window.requestAnimationFrame(draw);  ctx.clearRect(0, 0, width, height);  ctx.beginPath();  ctx.strokeStyle="#000";  ctx.fillStyle = lingrad;  ctx.lineWidth = 1;  ctx.moveTo(0, height /2);    Q+=speed;  for (let x = 0; x <=  width; x++) {    var y = A*Math.sin(W*x+Q) +H;    ctx.lineTo(x, y);  }  ctx.lineTo(width, height);  ctx.lineTo(0, height);  ctx.fill();  ctx.closePath();})()

效果如下呈︰

四讀揣宦、完善水波動畫

1外、首先可以對上面波形疊加一個頻率更高的波形任嘩甩,使波形無規矩

var s = 0.1*Math.sin(x/150)+1;var y = A*Math.sin(W*x+Q) +H;y=y*s;

2靡坑、再添加一個相位變化不同的波形膝鏈,其漸變填充與上一個漸變方向相反使其形成相互重疊的陰影效果;並設置路徑重疊效果globalCompositeOperation; 

var canvas = document.getElementById("canvas"),   ctx = canvas.getContext("2d"),   width = canvas.width = canvas.offsetWidth,   height = canvas.height = canvas.offsetHeight;var A=30,   W=1 /200,   Q=0,   H= height / 2;var A2=30,   W2=1/300,   Q2=0,   H2= height / 2;var speed=-0.01;var speed2=-0.02;var lingrad = ctx.createLinearGradient(0,0,width,0);lingrad.addColorStop(0, "rgba(0,186,128,0.8)");lingrad.addColorStop(1, "rgba(111,224,195,1)");  var lingrad2 = ctx.createLinearGradient(0,0,width,0);lingrad2.addColorStop(0,"rgba(111,224,195,1)");lingrad2.addColorStop(1, "rgba(0,186,128,0.8)"); (function draw(){  window.requestAnimationFrame(draw);  ctx.clearRect(0, 0, width, height);  ctx.beginPath();  ctx.fillStyle = lingrad;  ctx.moveTo(0, height /2);  //繪制第一個波形  Q+=speed;  for (let x = 0; x <=  width; x++) {    var s = 0.1*Math.sin(x/150)+1;    var y = A*Math.sin(W*x+Q) +H;    y=y*s;    ctx.lineTo(x, y);  }  ctx.lineTo(width, height);  ctx.lineTo(0, height);  ctx.fill();  ctx.closePath()  //設置重疊效果  ctx.globalCompositeOperation = "destination-over"  //繪制第二個波形  ctx.beginPath();  ctx.fillStyle = lingrad2;  Q2+=speed2;  for (let x = 0; x < width; x++) {    var y = A2*Math.sin(x*W2+Q2) +H2;    ctx.lineTo(x, y);  }  ctx.lineTo(width,height);  ctx.lineTo(0,height);  ctx.fill()  ctx.closePath();})()

以上就是本文的全部內容龐法,希望對大家的學習有所幫助端,也希望大家多多支持網頁設計凶。

一佰互聯是全國知名建站品牌服務商,我們有九年網站建設廠、網站制作開布、網頁設計饋施、php開發和域名注冊及虛擬主機服務經驗精匠,提供的自助建站服務更是全國有名祿。近年來還整合團隊優勢自主開發了可視化多用戶”巔雲建站系統“3.0平台版攫部忿,拖拽排版網站制作設計據,輕松實現pc站笑爸賃、手機微網站繳醇、小程序絲始接、APP一體化全網營銷網站建設 囤計仁,已成功的為全國上百家網絡公司提供自助建站平台搭建服務畝烷。

上一篇噬逗火︰HTML5 使用 sessionStorage 進行頁面傳值的方法
下一篇溯︰ 你可能不熟練的十個前端HTML5經典面試題
[返回新聞列表]

相關新聞more

20
04月
HTML5有哪些新特征

一酪、HTML5 中的一些有趣的新特性床膿︰用于繪畫的 canvas 元素用于媒介回放的 video 和 audio 元素對本地離線存儲的更好的支... >>詳情

09
04月
如何巧用線條療乃堅,讓你的Banner 更有設計感

在上兩期整理banner設計的過程中賢貝,我發現線框在banner設計中的應用非常廣泛熔奸紅。不僅能夠輔助一些元素的設計菲窪勤,還可以為設計增色不少濺摧通,增加設... >>詳情

17
04月
大學生輕信“網店消費返佣金”廣告 被騙900

“只要有一台電腦就能在家掙大錢”宛婚、“每天一小時幸雄,輕松賺外快……”... >>詳情

25
04月
PHP實現的創建帶logo圖標二維碼生成類詳

本文實例講述了PHP實現的創建帶logo圖標二維碼生成類媚。分享給大家供大家參考吮類矯,具體如下咸︰這里介紹php實現創建二維碼類喜飽,支持設置尺寸椒賄,加入... >>詳情

營業執照. cdn加速服務 備案系統認證 網絡安全協會 我們的支付方式AAA認證

7x24小時服務電話:18581389571 傳真:023-85725751 免費建站交流群馬推︰236412099 139947842(自助建站交流) E-Mail:post@yinxi.net 網站投訴:
重慶楚捷科技有限公司 一佰互聯©版權所有 自助建站(www.yinxi.net,Inc.) 2001-2020 All Rights Reserved 本站程序受法律保護,網站法律顧問劑幢︰ITLAW-莊毅雄律師
中華人民共和國信息產業部網站備案號:渝ICP備12000592號
北京赛车北京赛车北京赛车