首页 > 代码库 > 利用canvas制作波浪效果
利用canvas制作波浪效果
不知道为什么，连发个帖子都习惯性的要按N次 Ctrl + s!!!!!
废话不多说，直接上代码。
/*****************************我是华丽的分割线*************************************/
canvas.js：
1 function curve(name, num, height, heaved, hz, reveal, start) { //id名和曲线数量,端点高低,起伏差,起伏频率,填充色 2 3 this.name = name; 4 if((num & 1) != 0) num--; 5 this.num = num; 6 this.height = height; 7 this.heaved = heaved; 8 this.max = height + heaved; //最低处 9 this.min = height - heaved; //最高处 10 this.hz = hz; 11 this.heavedval = {}; 12 for(this.i = 0; this.i <= num; this.i++) { //初始化起伏 13 this.heavedval[this.i] = {}; 14 if((this.i & 1) == 0) this.heavedval[this.i][‘heaved‘] = height - heaved; //双数 15 else this.heavedval[this.i][‘heaved‘] = height + heaved; //单数 16 } 17 this.new(this.width * (start || 0)); 18 this.object = document.getElementById(name); 19 this.object.width = this.width; 20 this.canvas = this.object.getContext("2d"); 21 this.canvas.fillStyle = reveal; //设定填充颜色 22 this.time(); 23 } 24 curve.prototype.width = document.body.clientWidth; 25 curve.prototype.point = function(start, end, heaved) { //曲线 26 this.canvas.lineTo(start, this.height); //起点 27 this.canvas.bezierCurveTo((start + end) / 2, heaved, (start + end) / 2, heaved, end, this.height); //终点 28 }; 29 curve.prototype.start = function() { //起点 30 this.canvas.clearRect(0, 0, this.width, this.object.height); //清除画板 31 this.canvas.beginPath(); //创建新路径 32 this.canvas.moveTo(0, this.object.height); 33 }; 34 curve.prototype.end = function() { //终点 35 this.canvas.lineTo(this.width, this.object.height); 36 this.canvas.fill(); 37 }; 38 curve.prototype.new = function(start) { //初始化值 39 var start = start || 0; 40 for(this.i = 0; this.i <= this.num; this.i++) { 41 this.heavedval[this.i][‘num‘] = this.width / this.num * this.i - start; 42 } 43 }; 44 curve.prototype.motion = function() { 45 if(this.heavedval[0][‘heaved‘] >= this.max) this.hz = -Math.abs(this.hz); 46 if(this.heavedval[0][‘heaved‘] <= this.min) this.hz = Math.abs(this.hz); 47 this.start(); 48 for(this.i = 0; this.i < this.num; this.i++) { 49 if((this.i & 1) == 0) this.heavedval[this.i][‘heaved‘] += this.hz; //双数 50 else this.heavedval[this.i][‘heaved‘] -= this.hz; //单数 51 this.point(this.heavedval[this.i][‘num‘] -= 1, this.heavedval[this.i + 1][‘num‘], this.heavedval[this.i][‘heaved‘]); 52 } 53 this.heavedval[this.num][‘num‘] -= 1; 54 for(this.i = 0; this.i < this.num; this.i++) { //复制 55 this.point(this.heavedval[this.i][‘num‘] + this.width, this.heavedval[this.i + 1][‘num‘] + this.width, this.heavedval[this.i][‘heaved‘]); 56 } 57 this.end(); 58 if(this.heavedval[this.num][‘num‘] <= 0) this.new(); 59 }; 60 curve.prototype.time = function() { 61 var time = this; 62 setInterval(function() { 63 time.motion(); 64 }, 2); 65 }; 66 (function() { 67 for(var a = 0, b = [‘ms‘, ‘moz‘, ‘webkit‘, ‘o‘], c = 0; b.length > c && !window.requestAnimationFrame; ++c) window.requestAnimationFrame = window[b[c] + ‘RequestAnimationFrame‘], window.cancelAnimationFrame = window[b[c] + ‘CancelAnimationFrame‘] || window[b[c] + ‘CancelRequestAnimationFrame‘]; 68 window.requestAnimationFrame || (window.requestAnimationFrame = function(b) { 69 var d = (new Date).getTime(), 70 e = Math.max(0, 16 - (d - a)), 71 f = window.setTimeout(function() { 72 b(d + e) 73 }, e); 74 return a = d + e, f 75 }), window.cancelAnimationFrame || (window.cancelAnimationFrame = function(a) { 76 clearTimeout(a) 77 }) 78 })(); 79 80 function curves(name, cheight, waveLength, height, curveFactor, speed, reveal, num) { 81 var canvas = document.getElementById(name); 82 var ctx = canvas.getContext(‘2d‘); 83 var stageWidth = 0; 84 var stageHeight = 0; 85 var stageWidth2 = 0; 86 var stageHeight2 = 0; 87 var totalLength2 = 0; 88 var distanceX = num || 0; 89 var DELTA_WIDTH = 1; 90 var config = { 91 height: height, 92 waveLength: waveLength, 93 curveFactor: curveFactor, 94 speed: speed 95 } 96 97 function init() { 98 99 window.onresize = onResize; 100 onResize(); 101 render(); 102 } 103 104 function onResize() { 105 stageWidth = canvas.width = window.innerWidth; 106 stageHeight = canvas.height = cheight; 107 stageWidth2 = stageWidth / 2; 108 stageHeight2 = stageHeight / 2; 109 totalLength2 = Math.ceil(stageWidth2 / DELTA_WIDTH) * DELTA_WIDTH; 110 redraw(); 111 } 112 113 function render() { 114 redraw(); 115 requestAnimationFrame(render); 116 } 117 118 function _getHeight(distanceX, x) { 119 var offsetX = ((distanceX + x) / totalLength2 - 1) * (totalLength2 / config.waveLength); 120 var waveFactor = Math.cos((x / totalLength2 - 1) * Math.PI / 2); 121 return Math.cos(offsetX * Math.PI) * Math.pow(waveFactor, config.curveFactor) * config.height; 122 } 123 124 function redraw() { 125 var x = stageWidth2 - totalLength2; 126 var toX = x + totalLength2 * 2; 127 var centerY = stageHeight2; 128 ctx.clearRect(0, 0, stageWidth, stageHeight); 129 ctx.beginPath(); 130 ctx.moveTo(x, stageHeight); 131 for(; x < toX; x += DELTA_WIDTH) { 132 ctx.lineTo(x, centerY - _getHeight(distanceX, x)); 133 } 134 ctx.lineTo(x, centerY - _getHeight(distanceX, x)); 135 ctx.lineTo(x + DELTA_WIDTH, stageHeight); 136 ctx.fillStyle = reveal; 137 ctx.fill(); 138 distanceX += config.speed; 139 } 140 init(); 141 }
/**************************分割线又来啦**********************************/
/* 在html页面引入canvas.js文件，下面是调用演示： */
/**************************分割线又来啦**********************************/
index.html ：
1 <!DOCTYPE html> 2 <html lang="zh"> 3 4 <head> 5 <meta charset="UTF-8" /> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge" /> 7 <title>波浪demo</title> 8 <style type="text/css"> 9 * { 10 margin: 0; 11 padding: 0; 12 } 13 body { 14 background: #000; 15 } 16 canvas { 17 display: block; 18 position: relative; 19 z-index: 9999; 20 z-index: 1 21 } 22 23 #cv1 { 24 margin-top: -200px; 25 height: 200px; 26 width: 100% 27 } 28 29 #cv2 { 30 margin-top: -300px; 31 height: 300px; 32 width: 100% 33 } 34 35 #cv3 { 36 margin-top: -300px; 37 height: 300px; 38 width: 100% 39 } 40 41 #cv4 { 42 margin-top: -300px; 43 height: 300px; 44 width: 100% 45 } 46 47 #bolang { 48 margin-top: -300px; 49 position: relative; 50 z-index: 999; 51 width: 100%; 52 } 53 </style> 54 </head> 55 56 <body> 57 <div class="sjkjmin" style="margin-top: 600px;"> 58 <canvas id="cv1" width="400" height="300"></canvas> 59 <canvas id="cv2" width="400" height="300"></canvas> 60 <canvas id="cv3" width="400" height="300"></canvas> 61 <canvas id="cv4" width="400" height="300"></canvas> 63 </div> 64 </body> 65 <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script> 66 <script src="js/canvas.js" type="text/javascript" charset="utf-8"></script> 67 <script type="text/javascript"> 68 $(document).ready(function() { 69 if((navigator.userAgent.indexOf(‘MSIE‘) >= 0) && 70 (navigator.userAgent.indexOf(‘Opera‘) < 0)) { 71 $(‘#bolang‘).show(); 72 $(‘canvas‘).hide(); 73 } else { 74 $(‘#bolang‘).hide(); 75 new curves(‘cv1‘, 300, 1000, 40, 0, 7, ‘rgba(118,228,244,1)‘, -1000); 76 new curve(‘cv2‘, 2, 200, 60, 0.3, ‘rgba(118,228,244,0.5)‘, 0.25); 77 new curve(‘cv3‘, 2, 190, 60, 0.2, ‘rgba(118,228,244,0.3)‘, 0.5); 78 new curve(‘cv4‘, 2, 210, 60, 0.3, ‘rgba(118,228,244,0.2)‘, 0.75); 79 } 80 }) 81 </script> 82 83 </html>
好了，代码已上完，本叼要继续去搬砖了，Good Luck~
利用canvas制作波浪效果
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。