js實(shí)現(xiàn)可愛的氣泡特效
本文實(shí)例為大家分享了js實(shí)現(xiàn)可愛的氣泡特效的具體代碼，供大家參考，具體內(nèi)容如下
代碼：
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> <title>Document</title></head><body> <canvas id='myCanvas'></canvas> <script> var c = document.getElementById('myCanvas'); c.width = 300; c.height = 500; var ctx = c.getContext(’2d’); var arr = [] function sui() { var r = Math.floor(Math.random() * 6 + 5); var x = Math.floor(Math.random() * (c.width - 2 * r)) + r; var y = c.height - r; var opacity = Math.random(); var red = Math.floor(Math.random() * 256); var green = Math.floor(Math.random() * 256); var blue = Math.floor(Math.random() * 256); var deg = 0; var scale = Math.floor(Math.random() * 6 + 10); arr.push({x,y,r,red,green,blue,opacity,deg,scale }) } setInterval(sui, 40); // 再實(shí)現(xiàn)變大和繪制 function dan() { ctx.clearRect(0, 0, c.width, c.height); arr.forEach((item, i) => {item.deg += 0.5;item.y -= item.deg;item.x += Math.sin(item.deg) * item.scale;if (item.y <= item.r) { arr.splice(i, 1);} else { ctx.beginPath(); ctx.arc(item.x, item.y, item.r, 0, Math.PI * 2); ctx.fillStyle = `rgba(${item.red},${item.green},${item.blue},${item.opacity})`; ctx.fill();} }) } setInterval(dan, 100); </script></body></html>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. php使用正則驗(yàn)證密碼字段的復(fù)雜強(qiáng)度原理詳細(xì)講解 原創(chuàng)2. Jsp servlet驗(yàn)證碼工具類分享3. Jsp+Servlet實(shí)現(xiàn)文件上傳下載 文件列表展示（二）4. ASP將數(shù)字轉(zhuǎn)中文數(shù)字(大寫金額)的函數(shù)5. jscript與vbscript 操作XML元素屬性的代碼6. 基于PHP做個(gè)圖片防盜鏈7. XML在語音合成中的應(yīng)用8. ASP.NET MVC使用Boostrap實(shí)現(xiàn)產(chǎn)品展示、查詢、排序、分頁9. asp.net core 認(rèn)證和授權(quán)實(shí)例詳解10. 基于javaweb+jsp實(shí)現(xiàn)企業(yè)車輛管理系統(tǒng)
網(wǎng)公網(wǎng)安備