用 Canvas 生成彩色三角形随机背景

思路是网上已经流行了一阵的多边风格（Low Poly），这次想用类似的样式做一个背景图，换个博客的背景，考虑三角形见棱见角，尖尖比较多，做背景的话效果不错。JS 和 Canvas 很好玩，就用这个了。

其实最后做出来的也不是多边风格，应该叫多堆叠彩色三角形，哈。

主要运用了 js 在页面的宽高的范围内，循环随机生成起点、二个顶点和颜色，然后用 canvas 画个有颜色带 Alpha 三角形。
然后利用 canvas 提供了 toDataURL 的接口，将 canvas 画布转化成可以当图片显示的 base64 编码。

熟肉代码如下：

(function(){
    var id="colortriangle" //建立 canvas 的 ID
        , divbackground="" //附加到背景的 ID
        , num=50 //生成数量
        , backgroundColor="rgba(255,255,255,0)" //默认颜色，默认透明
        , limitX = window.screen.width
        , limitY = window.screen.height
        , end
        ;
    var createCanvas=document.createElement("canvas");
    createCanvas.id=id;
    createCanvas.style.display="none"; //因为只用作背景图，所以隐藏掉，如果想生成的话，需要将最下边的4行做背景图的代码部分删除
    document.body.appendChild(createCanvas);

    var canvas = g(id);
    var context = canvas.getContext('2d');
    canvas.imageSmoothingEnabled = true;
    canvas.width = limitX;
    canvas.height = limitY;

    context.fillStyle=backgroundColor;
    context.fillRect(0, 0, limitX, limitY);

    for (var i = 0; i < num; i++){
        context.beginPath();
        context.moveTo(Math.random() * limitX, Math.random() * limitY);
        context.lineTo(Math.random() * limitX, Math.random() * limitY);
        context.lineTo(Math.random() * limitX, Math.random() * limitY);
        context.fillStyle = randomColor(255, 255, 255, .5);
        context.closePath();
        context.fill();
    }
    function randomColor(r, g, b, a){
        var alpha=(Math.random()*0.5+0.1).toFixed(1);
        return "rgba(" + Math.floor(Math.random()*r).toString() + "," +
            Math.floor(Math.random()*g).toString() + "," +
            Math.floor(Math.random()*b).toString() + ", "+alpha+")";
    }
    function g(id) {
        return document.getElementById(id);
    }
    var divbg=g(divbackground);
    divbg.style.backgroundImage = 'url("' + context.canvas.toDataURL() + '")';
    divbg.style.backgroundAttachment ="fixed";
    divbg.style.backgroundRepeat ="no-repeat";
})();