一个基于HTML5的CANVAS的彩色水波纹的小栗子 

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4 <title>canvas</title>
  5 <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
  6 <script>
  7 CanvasRenderingContext2D.prototype.circle = function (x, y, radius)
  8 {
  9     this.save();
 10 
 11     this.beginPath();
 12     this.arc(x, y, radius, 0, 2 * Math.PI);
 13     this.closePath();
 14 
 15     this.restore();
 16 
 17     return this;
 18 }
 19 </script>
 20 <script>
 21 $(function()
 22 {
 23     // 存储wave的数组
 24     var waveArray = [];
 25 
 26     // 获取Canvas Context
 27     var myCanvas = document.getElementById("myCanvas");
 28     var canvasContext = myCanvas.getContext("2d");
 29 
 30     // wave批量绘制函数
 31     var waveBatchPaintFunc = function()
 32     {
 33         // waveArray数组为空，则不处理
 34         if (waveArray.length == 0) return;
 35 
 36         // 清空canvas绘图区
 37         canvasContext.clearRect(0, 0, myCanvas.width, myCanvas.height);
 38 
 39         // 遍历waveArray数组（从后往前遍历，便于删除wave）
 40         for (var i = waveArray.length - 1; i >= 0; i--)
 41         {
 42             var waveItem = waveArray[i];
 43 
 44             // 根据速度增加wave绘制半径
 45             waveItem.radiusCurrent += waveItem.speed;
 46 
 47             // 判断是否超过最大半径
 48             if (waveItem.radiusCurrent < waveItem.radiusMax)
 49             {
 50                 // 每个wave定制颜色
 51                 canvasContext.fillStyle = waveItem.color;
 52 
 53                 // wave半径越大，其透明度越小
 54                 canvasContext.globalAlpha = 1 - waveItem.radiusCurrent / waveItem.radiusMax;
 55 
 56                 // 绘制wave
 57                 canvasContext.circle(waveItem.position.x, waveItem.position.y, waveItem.radiusCurrent).fill();
 58             }
 59             else
 60             {
 61                 // wave超过最大半径，则删除它
 62                 waveArray.splice(i, 1);
 63             }
 64         }
 65     }
 66 
 67     // 每50ms批量绘制一次
 68     setInterval(waveBatchPaintFunc, 50);
 69 
 70     // 鼠标移动事件锁定标志
 71     var mouseLock = false;
 72 
 73     // 鼠标移动事件解锁定函数
 74     var mouseUnlockFunc = function()
 75     {
 76         mouseLock = false;
 77     }
 78 
 79     // 每100ms只能响应一次鼠标移动事件
 80     setInterval(mouseUnlockFunc, 100);
 81 
 82     // 鼠标移动事件绑定
 83     $("#myCanvas").on("mousemove", function(e)
 84     {
 85         if (!mouseLock)
 86         {
 87             // 每绘制一次则锁定鼠标事情，等待下次解锁
 88             mouseLock = true;
 89 
 90             // 准备新wave的初始参数
 91             var waveSpeed = 5;
 92             var radiusMax = myCanvas.width / 2;
 93 
 94             var speedRand = (Math.random() * 2 + 1) / 3;
 95             var radiusRand = Math.random();
 96 
 97             // 鼠标的每次移动都会生成一个wave
 98             waveArray.push(
 99                 {
100                     "color" : colorRand(),
101                     "radiusCurrent" : 0,
102                     "speed" : waveSpeed * speedRand,        // 乘以速度系数，使每个wave的速度都不同
103                     "radiusMax" :  radiusMax * radiusRand,  // 乘以半径系数，使每个wave的最大半径都不同
104                     "position" : { "x" : e.offsetX, "y" : e.offsetY }
105                 }
106             );
107         }
108     });
109 
110     // 随机颜色生成函数
111     var colorRand = function()
112     {
113         // 候选颜色
114         var colorCandidate = "ABCDEF";
115 
116         var redRand   = Math.floor(Math.random() * colorCandidate.length);
117         var greenRand = Math.floor(Math.random() * colorCandidate.length);
118         var blueRand  = Math.floor(Math.random() * colorCandidate.length);
119 
120         var colorRed   = colorCandidate[redRand];
121         var colorGreen = colorCandidate[greenRand];
122         var colorBlue  = colorCandidate[blueRand];
123 
124         return "#" + colorRed + colorGreen + colorBlue;
125     }
126 });
127 </script>
128 <style>
129 #myCanvas
130 {
131     /* border:1px solid #AAA; */
132 }
133 </style>
134 </head>
135 <body>
136 <canvas id="myCanvas" width="720" height="640">
137 Your browser does not support the canvas element.
138 </canvas>
139 </body>
140 </html>

 

posted on 2018-02-28 17:29  tianjun9  阅读(362)  评论(0)    收藏  举报