✨ Feature: add canvas ribbon (#190)

add canvas ribbon for hexo-theme-melody

_config.yml

@@ -253,6 +253,14 @@ busuanzi:
   page_pv_header: <i class="fa fa-file"></i>
   page_pv_footer:
 
+# canvas_ribbon
+# See: https://github.com/zproo/canvas-ribbon
+canvas_ribbon:
+  enable: false
+  size: 150
+  alpha: 0.6
+  zIndex: -1
+
 # Sidebar Settings
 # ---------------
 #links_title: Links

layout/includes/additional-js.pug

@@ -8,8 +8,10 @@ if (theme.katex && theme.katex.enable)
     include ./third-party/katex.pug
 if (theme.local_search && theme.local_search.enable)
   script(src=url_for('/js/search/local-search.js'))
+if (theme.canvas_ribbon && theme.canvas_ribbon.enable)
+  include ./third-party/canvas-ribbon.pug
 script.
   if(/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
     $('#nav').addClass('is-mobile')
     $('footer').addClass('is-mobile')
-  }
+  }

layout/includes/third-party/canvas-ribbon.pug

@@ -0,0 +1,2 @@
+script(id="ribbon" src=url_for('/js/canvas-ribbon.js') size=theme.canvas_ribbon.size
+alpha=theme.canvas_ribbon.alpha zIndex=theme.canvas_ribbon.zIndex)

source/js/canvas-ribbon.js

@@ -0,0 +1,77 @@
+/**
+ * Created by zproo on 2017/4/8.
+ */
+!function () {
+    document.addEventListener('touchmove', function (e) {
+        e.preventDefault()
+    });
+
+    function getAttr(script, attr, default_val) {
+        return Number(script.getAttribute(attr)) || default_val;
+    }
+
+    // 获取自定义配置
+    var ribbon = document.getElementById('ribbon');  // 当前加载的script
+    config = {
+        zIndex: getAttr(ribbon, "zIndex", -1), // z-index
+        alpha: getAttr(ribbon, "alpha", 0.6), // alpha
+        ribbon_width: getAttr(ribbon, "size", 90), // size
+        immutable: getAttr(ribbon, "immutable", false), // size
+    };
+
+    var canvas = document.createElement("canvas");
+    canvas.style.cssText = "opacity:0.6;position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:"+config.zIndex;
+    document.getElementsByTagName("body")[0].appendChild(canvas);
+
+    var canvasRibbon = canvas,
+        ctx = canvasRibbon.getContext('2d'),    // 获取canvas 2d上下文
+        dpr = window.devicePixelRatio || 1, // the size of one CSS pixel to the size of one physical pixel.
+        width = window.innerWidth,     // 返回窗口的文档显示区的宽高
+        height = window.innerHeight,
+        RIBBON_WIDTH = config.ribbon_width,
+        path,
+        math = Math,
+        r = 0,
+        PI_2 = math.PI * 2,    // 圆周率*2
+        cos = math.cos,   // cos函数返回一个数值的余弦值（-1~1）
+        random = math.random;   // 返回0-1随机数
+
+    canvasRibbon.width = width * dpr;     // 返回实际宽高
+    canvasRibbon.height = height * dpr;
+    ctx.scale(dpr, dpr);    // 水平、竖直方向缩放
+    ctx.globalAlpha = config.alpha;  // 图形透明度
+
+    function init() {
+        ctx.clearRect(0, 0, width, height);     // 擦除之前绘制内容
+        path = [{x: 0, y: height * 0.7 + RIBBON_WIDTH}, {x: 0, y: height * 0.7 - RIBBON_WIDTH}];
+        // 路径没有填满屏幕宽度时，绘制路径
+        while (path[1].x < width + RIBBON_WIDTH) {
+            draw(path[0], path[1])
+        }
+    }
+
+    function draw(start, end) {
+        ctx.beginPath();    // 创建一个新的路径
+        ctx.moveTo(start.x, start.y);   // path起点
+        ctx.lineTo(end.x, end.y);   // path终点
+        var nextX = end.x + (random() * 2 - 0.25) * RIBBON_WIDTH,
+            nextY = geneY(end.y);
+        ctx.lineTo(nextX, nextY);
+        ctx.closePath();
+
+        r -= PI_2 / -50;
+        // 随机生成并设置canvas路径16进制颜色
+        ctx.fillStyle = '#' + (cos(r) * 127 + 128 << 16 | cos(r + PI_2 / 3) * 127 + 128 << 8 | cos(r + PI_2 / 3 * 2) * 127 + 128).toString(16);
+        ctx.fill();     // 根据当前样式填充路径
+        path[0] = path[1];    // 起点更新为当前终点
+        path[1] = {x: nextX, y: nextY}     // 更新终点
+    }
+
+    function geneY(y) {
+        var temp = y + (random() * 2 - 1.1) * RIBBON_WIDTH;
+        return (temp > height || temp < 0) ? geneY(y) : temp;
+    }
+    // document.onclick = init;
+    document.ontouchstart = init;
+    init();
+}();