canvas实现线条波纹起伏波动动画效果代码
代码语言:html
所属分类:动画
代码描述:canvas实现线条波纹起伏波动动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { margin:0; overflow:hidden; background:black; } </style> </head> <body> <canvas id = "cs"> </canvas> <script> //The code below creates a simulation of waves var parts = []; var waves = []; var can = document.getElementById("cs"); var ctx = can.getContext("2d"); can.width = window.innerWidth; can.height = window.innerHeight; function randFrom(min, max) { //This function selects a random decimal number from the minimum to the maximum value return Math.random() * (max - min) + min; } function randBet(c1, c2) { //This function picks a random item between choice 1 and choice 2 var nArr = [c1, c2]; return nArr[Math.floor(Math.random() * 2)]; } function Wave(period, amp, waveL, dir) { //This is an object function for creating a Wave with attributes of: period,amplitude,wavelength and direction, all in terms of pixels this.phase = 0; if (dir == "left") { var dirVal = 1; } else if (dir == "right") { var dirVal = -1; } this.applyTo = function (points) { //This sub-function applies the wave properties to a list of points for (var i = 0; i < points.length; i++) { var initPhase = 2 * Math.PI * points[i].x / waveL; points[i].y += amp * Math.sin(this.phase + initPhase * dirVal); .........完整代码请登录后点击上方下载按钮下载查看
网友评论0