利用canvas生成Material design風格的頭像：md-avatar

利用canvas生成Material design風格的頭像：md-avatar

install

bower install md-avatar

usage

new mdAvatar(options); // It will return a canvas dom element.

new mdAvatar({
    size: 100,
    text: 'S'
}); // <canvas width="100" height="100">

new mdAvatar({
    size: 64,
    text: 'G'
}).toDataURL(); // data:image/png;base64,.......

options

• target (default:null)

  The ID of target canvas, or you can pass a canvas dom. If this field not provide, it will return a new canvas element bydocument.createElement('canvas').

• size (default:32)

  The size of avatar(canvas).

• text (default:?)

  The text in avatar. You can pass a string in to this field, but it will only take the FIRST char.

• textColor (default:white)

  The color of text.

• textSize (default:this.size / 2)

  The size of text.

• textAlign (default:center)

• textBaseline (default:middle)

• fontFamily (default:sans-serif)

• bgColor (default: depend onthis.text)

  The avatar's background color. By default, it contains color patterns(500) in Material Design Color. And the color's default value is depend onthis.text(not random).

項目主頁：http://www.baiduhome.net/lib/view/home/1438953702692