HTML5 利用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~

 

转载于:https://www.cnblogs.com/jinwu88/p/7204972.html