二维码特效 – 有爱前端

https://codepen.io/christianp/pen/xVQWmE

<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>二维码特效</title> </head> <body> <canvas id="swing" width="600" height="600"></canvas> <p><input type="range" id="t-slider" min="0" max="1" step="0.001" style="width:100%"></p> <p><label>Play <input type="checkbox" id="play-checkbox" checked></label></p> <p><input type="text" id="message-input" value="http://yhqtb.vip/mybook/#/" style="width:100%"></p> <script src="https://cdn.rawgit.com/davidshimjs/qrcodejs/master/qrcode.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> console.clear(); var canvas = document.getElementById('swing'); var ctx = canvas.getContext('2d'); var t_slider = document.getElementById('t-slider'); var t_checkbox = document.getElementById('play-checkbox'); var message_input = document.getElementById('message-input'); function id(x) { return x } function QRAnimator(text) { this.q = new QRCode(document.createElement('div')); this.set_text(message_input.value); var qra = this; this.doFrame = function() { qra.frame(); } } QRAnimator.prototype = { time: 0, d: 0.005, wait: 0.2, set_text: function(text) { this.text = text; this.q.makeCode(text); this.size = this.q._oQRCode.getModuleCount(); this.max_white = 0; this.rows = []; this.num_white = []; for(var y = 0; y < this.size; y++) { var row = []; for(var x = 0; x < this.size; x++) { row.push(this.q._oQRCode.isDark(x, y)); } this.rows.push(row); this.num_white.push(this.size - row.filter(id).length); this.max_white = Math.max(this.max_white, this.num_white[y]); } }, draw: function() { var size = this.size; var max_white = this.max_white; var num_white = this.num_white; var rows = this.rows; var t = Math.min(1, Math.max(0, this.time)); ctx.fillStyle = '#fff'; ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.fillStyle = '#000'; var pixel = canvas.width / size; var w = [3, 2, 1]; for(var y = 0; y < size; y++) { var space = t * max_white; var off = 0 //(1-t)*(num_white[y])/2; var blacks = 0; var num_black = size - num_white[y]; for(var x = 0; x < size; x++) { if(rows[y][x]) { blacks += 1; var alpha = (1 - t) * Math.sqrt(1 - off / x); var alpha = (1 - t) * Math.sqrt(off / size); var alpha = (1 - t) * ((w[0] * blacks / num_black + w[1] * off / size + w[2] * off / (x + 1)) / (w[0] + w[1] + w[2])); var light = Math.min(alpha * Math.pow((blacks - 1) / num_black, 1.1) / (2 * (t + 0.00001)), 1); //ctx.fillStyle = 'hsl(0,100%,'+(100*alpha)+'%)' ctx.fillStyle = 'hsl(' + (120 * alpha + 120) + ',' + (100 * alpha) + '%,' + (100 * light) + '%)'; var fudge = 0.3 ctx.fillRect(off * pixel - fudge, y * pixel - fudge, pixel + 2 * fudge, pixel + 2 * fudge); off += 1; } else { var take = Math.min(space, 1); off += take; space -= take; } } } }, frame: function() { this.time += this.d; if(this.time >= 1 + this.wait || this.time <= -this.wait) { this.d = -this.d; this.time += this.d; } this.draw(); t_slider.value = this.time; if(t_checkbox.checked) { requestAnimationFrame(this.doFrame); } } } var qra = new QRAnimator('hi'); qra.doFrame(); t_checkbox.addEventListener('change', qra.doFrame); t_slider.addEventListener('input', function() { qra.time = parseFloat(t_slider.value); qra.draw(); }) message_input.addEventListener('input', function() { qra.set_text(message_input.value); qra.draw(); }) </script> </body> </html>

提示：你可以先修改部分代码再运行。

转载请注明：有爱前端 » 二维码特效